/* CSS Custom Properties (Variables) - Stationary Theme */
:root {
    /* Dark Gold Primary Colors */
    --primary-50: #fefcf0;
    --primary-100: #fef7d4;
    --primary-200: #fceda8;
    --primary-300: /* Secondary button styles */

    --primary-400: #f5ca38;
    --primary-500: #DAA520; /* Goldenrod */
    --primary-600: #B8860B; /* Dark gold */
    --primary-700: #9A7209;
    --primary-800: #7F5F07;
    --primary-900: #6B4F06;

    /* Warm paper-like grays */
    --gray-50: #faf7f0;
    --gray-100: #f5f2e8;
    --gray-200: #e8e2d5;
    --gray-300: #d4c4a8;
    --gray-400: #b8a082;
    --gray-500: #8b7355;
    --gray-600: #6d5940;
    --gray-700: #5a4932;
    --gray-800: #3d3128;
    --gray-900: #2f2f2f;

    /* Status colors for card backgrounds */
    --green-50: #e8f5e8;
    --green-100: #c8e6c9;
    --green-600: #228B22;
    --green-800: #1b5e20;

    --blue-50: #e3f2fd;
    --blue-100: #bbdefb;
    --blue-600: #4682B4;
    --blue-800: #2c5aa0;

    --red-50: #ffebee;
    --red-100: #ffcdd2;
    --red-600: #DC143C;
    --red-800: #b71c1c;

    /* Amber/warning colors */
    --amber-50: #fff8e1;
    --amber-100: #ffecb3;
    --amber-600: #FF8C00;
    --amber-800: #e65100;
    
    /* Warning colors (yellow/orange) */
    --warning-50: #fff8e1;
    --warning-100: #ffecb3;
    --warning-200: #ffe082;
    --warning-700: #f57c00;
    --warning-800: #e65100;
    
    /* Danger colors (red) */
    --danger-50: #ffebee;
    --danger-100: #ffcdd2;
    --danger-200: #ef9a9a;
    --danger-600: #DC143C;
    --danger-700: #c62828;
    --danger-800: #b71c1c;

    /* No shadows - clean stationary look */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-paper: none;
    
    --border-radius: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-sm: 0.2rem;
    
    /* Stationary-inspired serif font */
    --font-family: 'Georgia', 'Times New Roman', serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    color: var(--gray-700);
    outline: 1px solid var(--gray-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

/* Success/Create button styles - Green filled for creation actions */
.btn-success {
    background: linear-gradient(135deg, var(--green-600) 0%, #1e7b1e 100%);
    color: white;
    outline: 1px solid var(--green-800);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(34, 139, 34, 0.2);
}

.btn-success:hover {
    background: linear-gradient(135deg, #1e7b1e 0%, var(--green-800) 100%);
    color: white;
}

.btn-success:focus,
.btn-success:active {
    background: linear-gradient(135deg, var(--green-800) 0%, #1b5e20 100%);
    outline: 1px solid var(--green-800);
    color: white;
    box-shadow: none;
    text-shadow: none;
}

/* Disabled button styles */
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-success:disabled,
.btn-success[disabled] {
    background-color: var(--gray-400);
    outline: 1px solid var(--gray-500);
    color: var(--gray-600);
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
}

html {
    font-size: 16px;
    line-height: 1.5;
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--gray-100);
    background-image: 
        radial-gradient(circle at 20px 50px, rgba(184, 134, 11, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 40px 80px, rgba(184, 134, 11, 0.02) 1px, transparent 1px);
    background-size: 100px 100px;
    color: var(--gray-900);
    line-height: 1.6;
}

/* Layout */
.app {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    padding: 1rem;
    max-width: calc(100vw - 16rem);
    margin-left: 16rem;
    overflow-x: auto;
}

/* Page Structure */
.page {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    min-height: 400px;
}

.page.hidden {
    display: none;
}

/* Utility Classes */
.hidden {
    opacity: 0;
    pointer-events: none;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.header-content h1.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.page-description {
    color: var(--gray-600);
    font-size: 0.875rem;
}

/* Buttons - Stationary Theme */
.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.6rem 0.4rem 0.6rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    outline: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-family: var(--font-family);
    outline: none;
}

.btn:focus,
.btn:active {
    outline: none;
    box-sizing: border-box;
    box-shadow: none;
    text-shadow: none;
}

/* Primary buttons - Subtle gold gradient with border */
.btn-primary {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.08) 0%, rgba(218, 165, 32, 0.12) 100%);
    color: var(--primary-600);
    outline: 1px solid var(--primary-600);
    box-shadow: 0 1px 3px rgba(218, 165, 32, 0.1);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
    border-color: var(--primary-700);
    color: var(--primary-700);
}

.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
    color: var(--primary-700);
    outline: 1px solid var(--primary-700);
    box-shadow: none;
    text-shadow: none;
}

/* Filled primary buttons - Rich gold gradient */
.btn-primary.btn-filled, 
.btn-primary-filled {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    color: white;
    outline: 1px solid var(--primary-700);
    box-shadow: 0 2px 4px rgba(218, 165, 32, 0.25);
}

.btn-primary.btn-filled:hover,
.btn-primary-filled:hover {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
    border-color: var(--primary-800);
    color: white;
}

.btn-primary.btn-filled:focus,
.btn-primary.btn-filled:active,
.btn-primary-filled:focus,
.btn-primary-filled:active {
    background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-900) 100%);
    border-color: var(--primary-800);
    color: white;
    outline: none;
    outline: 1px solid var(--primary-800);
    box-shadow: none;
    text-shadow: none;
}

/* Secondary button styles */
.btn-secondary {
    background-color: transparent;
    color: var(--gray-600);
    outline: 1px solid var(--gray-300);
}

.btn-secondary:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-700);
    outline: none;
    outline: 1px solid var(--gray-400);
    box-shadow: none;
    text-shadow: none;
}

.btn-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

/* Cards - Stationary paper effect */
.card {
    background-color: var(--gray-50);
    border-radius: var(--border-radius-lg);
    outline: 1px solid var(--gray-200);
    overflow: hidden;
    transition: background-color 0.2s ease-in-out;
}

.card:hover {
    background-color: white;
}

/* Status-specific card backgrounds */
.card.status-paid {
    background-color: var(--green-50);
    outline: 1px solid var(--green-100);
}

.card.status-sent,
.card.status-pending {
    background-color: var(--amber-50);
    outline: 1px solid var(--amber-100);
}

.card.status-overdue {
    background-color: var(--red-50);
    outline: 1px solid var(--red-100);
}

.card.status-draft {
    background-color: var(--gray-100);
    outline: 1px solid var(--gray-200);
}

.card-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
}

.view-all-link {
    color: var(--primary-600);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.view-all-link:hover {
    color: var(--primary-700);
}

/* Tables */
.table-container {
    overflow-x: auto;
    overflow-y: visible;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    background-color: var(--gray-50);
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gray-200);
}

.table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.875rem;
}

.table .status-cell {
    position: relative;
    overflow: visible;
}

.table tbody tr:hover {
    background-color: var(--gray-50);
}

/* Status Badges - Stationary Theme */
.status-badge {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: capitalize;
    outline: 1px solid transparent;
    font-family: var(--font-family);
}

.status-badge.paid {
    background-color: var(--green-600);
    color: white;
    outline: 1px solid var(--green-800);
}

.status-badge.sent,
.status-badge.pending {
    background-color: var(--amber-600);
    color: white;
    outline: 1px solid var(--amber-800);
}

.status-badge.overdue {
    background-color: var(--red-600);
    color: white;
    outline: 1px solid var(--red-800);
}

.status-badge.draft {
    background-color: var(--gray-500);
    color: white;
    outline: 1px solid var(--gray-700);
}

.status-badge.cancelled {
    background-color: var(--gray-400);
    color: var(--gray-700);
    outline: 1px solid var(--gray-500);
    text-decoration: line-through;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--gray-500);
}

.empty-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem auto;
    color: var(--gray-400);
}

.empty-state p {
    margin-bottom: 1rem;
}

/* Action Links */
.action-link {
    color: var(--primary-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
}

.action-link:hover {
    color: var(--primary-700);
}

.action-icon {
    width: 1rem;
    height: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .app {
        flex-direction: column;
    }
    
    .main-content {
        max-width: 100vw;
        width: 100%;
        margin-left: 0;
        padding: 1rem;
        padding-top: 200px; /* Account for mobile nav height (header + menu + footer) */
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .table-container {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }
    
    .table {
        min-width: 600px;
    }
    
    .card {
        padding: 1rem;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .form-group {
        width: 100%;
    }
}

/* Utility Classes */
.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-gray-500 {
    color: var(--gray-500);
}

.text-gray-900 {
    color: var(--gray-900);
}

.whitespace-nowrap {
    white-space: nowrap;
}