/**
 * RIC Order Dashboard - Main Stylesheet
 * 
 * This file contains all styles for the PWA.
 * See docs/STYLE_GUIDE.md for brand specifications.
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================================================= */

:root {
    /* Brand Colors */
    --brand-primary: #86B2A3;      /* Sage green */
    --brand-secondary: #F79F99;    /* Coral */
    --brand-tertiary: #FDCFAF;     /* Peach */
    
    /* Semantic Colors */
    --color-rush: #C41E3A;         /* Rush order text */
    --color-unviewed: #007AFF;     /* Unviewed indicator dot */
    --color-success: #34C759;
    --color-error: #FF3B30;
    
    /* Light Mode (default) */
    --color-background: #FFFFFF;
    --color-surface: #F5F5F5;
    --color-border: #E0E0E0;
    --color-text-primary: #1C1C1E;
    --color-text-secondary: #8E8E93;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    
    /* Typography */
    --font-display: 'Paytone One', cursive;
    --font-body: 'Montserrat', sans-serif;
    
    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Safe areas for notched phones */
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #000000;
        --color-surface: #1C1C1E;
        --color-border: #38383A;
        --color-text-primary: #FFFFFF;
        --color-text-secondary: #8E8E93;
    }
}


/* =============================================================================
   RESET & BASE STYLES
   ============================================================================= */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-background);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
}


/* =============================================================================
   APP CONTAINER
   ============================================================================= */

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}


/* =============================================================================
   LOADING SCREEN (placeholder until JS loads)
   ============================================================================= */

.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-xl);
    text-align: center;
}

.loading-screen h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--brand-primary);
    margin-bottom: var(--space-md);
}

.loading-screen p {
    color: var(--color-text-secondary);
}


/* =============================================================================
   LOGIN SCREEN
   ============================================================================= */

/**
 * Main container for the login screen
 * Centers everything vertically and horizontally on the page
 */
.login-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-xl);
    background-color: var(--color-background);
}

/**
 * The app title "RIC Orders" at the top of the login screen
 * Uses the brand display font (Paytone One)
 */
.login-screen__title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--brand-primary);
    margin-bottom: var(--space-xl);
    text-align: center;
}

/**
 * Container for the login form elements
 * Has a max width so it doesn't stretch too wide on tablets
 */
.login-screen__form {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/**
 * Password input field styling
 * Large touch target for mobile, rounded corners
 */
.login-screen__input {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.2s ease;
    /* Minimum touch target size for accessibility */
    min-height: 48px;
}

/**
 * Input focus state - highlights with brand color
 */
.login-screen__input:focus {
    border-color: var(--brand-primary);
}

/**
 * Input placeholder text styling
 */
.login-screen__input::placeholder {
    color: var(--color-text-secondary);
}

/**
 * Primary button styling (used for Sign In button)
 * Uses the sage green brand color
 */
.button-primary {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--brand-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    /* Minimum touch target size for accessibility */
    min-height: 48px;
}

/**
 * Button hover state - slightly darker
 */
.button-primary:hover {
    background-color: #6B9485;
}

/**
 * Button active/pressed state - even darker and slight scale down
 */
.button-primary:active {
    background-color: #5A8374;
    transform: scale(0.98);
}

/**
 * Button disabled state - grayed out and non-interactive
 */
.button-primary:disabled {
    background-color: var(--color-border);
    cursor: not-allowed;
    transform: none;
}

/**
 * Error message styling for failed login attempts
 * Red text centered below the form
 */
.login-screen__error {
    color: var(--color-error);
    font-size: 0.875rem;
    text-align: center;
    margin-top: var(--space-sm);
    /* Hidden by default, shown via JavaScript */
    display: none;
}

/**
 * Show the error message when it has the 'visible' class
 */
.login-screen__error.visible {
    display: block;
}


/* =============================================================================
   SHARED LAYOUT COMPONENTS
   ============================================================================= */

/**
 * Main content area wrapper
 * Used by dashboard, orders, settings views
 * Accounts for bottom navigation bar height
 */
.main-content {
    flex: 1;
    padding: var(--space-md);
    padding-bottom: calc(70px + var(--safe-area-bottom) + var(--space-md));
    overflow-y: auto;
}

/**
 * Page header with title
 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    margin-bottom: var(--space-md);
}

.page-header__title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--brand-primary);
}

/**
 * Refresh button in header
 */
.refresh-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--brand-primary);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.refresh-button:active {
    background-color: var(--color-surface);
}

.refresh-button.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/**
 * Pull-to-refresh indicator
 */
.pull-refresh {
    display: none;
    justify-content: center;
    align-items: center;
    padding: var(--space-md);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.pull-refresh.visible {
    display: flex;
}


/* =============================================================================
   BOTTOM NAVIGATION BAR
   ============================================================================= */

/**
 * Fixed bottom navigation bar
 * Shows Dashboard, Orders, Settings tabs
 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(70px + var(--safe-area-bottom));
    padding-bottom: var(--safe-area-bottom);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

/**
 * Individual navigation tab button
 */
.bottom-nav__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
    min-width: 70px;
    min-height: 50px;
}

/**
 * Active/selected tab state
 */
.bottom-nav__tab.active {
    color: var(--brand-primary);
}

/**
 * Tab icon (emoji or SVG)
 */
.bottom-nav__icon {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

/**
 * Tab label text
 */
.bottom-nav__label {
    font-size: 0.75rem;
    font-weight: 500;
}


/* =============================================================================
   DASHBOARD VIEW
   ============================================================================= */

/**
 * Grid of stat cards showing order totals
 * 2 columns on mobile, adapts to screen size
 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/**
 * Individual stat card
 * Shows a label and value (e.g., "Today" and "$1,234")
 */
.stat-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

/**
 * Stat card label (e.g., "Today", "This Week")
 */
.stat-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/**
 * Stat card value (the dollar amount)
 * Uses Montserrat bold for better readability
 */
.stat-card__value {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text-primary);
}

/**
 * Large stat card - spans full width
 * Used for YTD total which is the most important number
 */
.stat-card--large {
    grid-column: span 2;
    background-color: var(--brand-primary);
}

.stat-card--large .stat-card__label {
    color: #FFFFFF;
    font-size: 0.875rem;
}

.stat-card--large .stat-card__value {
    font-size: 2.5rem;
    color: #FFFFFF;
}


/* =============================================================================
   WEEKLY CHART
   ============================================================================= */

/**
 * Container for the weekly totals chart
 */
.chart-section {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
}

.chart-section__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

/**
 * Bar chart container
 */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 120px;
    gap: 4px;
}

/**
 * Individual bar in the chart
 */
.bar-chart__bar {
    flex: 1;
    background-color: var(--brand-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-height: 4px;
    transition: opacity 0.2s ease;
}

.bar-chart__bar:hover {
    opacity: 0.8;
}

/**
 * Week labels below the chart
 */
.bar-chart__labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-sm);
}

.bar-chart__label {
    flex: 1;
    text-align: center;
    font-size: 0.625rem;
    color: var(--color-text-secondary);
}


/* =============================================================================
   ORDERS LIST
   ============================================================================= */

/**
 * Container for the list of orders
 */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/**
 * Individual order card in the list
 */
.order-card {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.order-card:active {
    background-color: var(--color-border);
}

/**
 * Blue dot indicator for unviewed orders
 */
.order-card__indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: var(--space-md);
    flex-shrink: 0;
}

.order-card__indicator--unviewed {
    background-color: var(--color-unviewed);
}

.order-card__indicator--viewed {
    background-color: transparent;
}

/**
 * Main content area of the order card
 */
.order-card__content {
    flex: 1;
    min-width: 0;
}

/**
 * Order number/subject line
 */
.order-card__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

/**
 * Rush order styling - bold red text
 */
.order-card__title--rush {
    color: var(--color-rush);
    font-weight: 700;
}

/**
 * Order date/time info
 */
.order-card__subtitle {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/**
 * Status pill badge in order list
 */
.order-card__status-pill {
    display: inline-block;
    padding: 0.125rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    background-color: #374151;
    color: #fff;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/**
 * Order date displayed below status pill
 */
.order-card__date {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/**
 * Right side container for amount and details
 */
.order-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: var(--space-md);
}

/**
 * Order total on the right side
 */
.order-card__amount {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary);
}

/**
 * Order details line (state, cameras, film)
 */
.order-card__details {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-top: 2px;
}

/**
 * Chevron arrow on the right
 */
.order-card__arrow {
    color: var(--color-text-secondary);
    margin-left: var(--space-sm);
    font-size: 1.25rem;
}


/* =============================================================================
   ORDER DETAIL VIEW
   ============================================================================= */

/**
 * Header bar with back button for detail views
 */
.detail-header {
    display: flex;
    flex-direction: column;
    padding: var(--space-md) 0;
    margin-bottom: var(--space-md);
}

.detail-header__top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/**
 * Back button styling - positioned absolutely on left
 */
.detail-header__back {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--brand-primary);
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    padding: var(--space-sm);
    width: 40px;
    height: 40px;
}

.detail-header__back:active {
    opacity: 0.7;
}

/**
 * Order title in the detail header - centered
 */
.detail-header__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--brand-primary);
}

/**
 * Needed date subtitle - centered under title
 */
.detail-header__subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-secondary);
    text-align: center;
    margin-top: var(--space-sm);
}

/**
 * Order total - large centered amount
 */
.detail-header__total {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-text-primary);
    text-align: center;
    margin-top: var(--space-sm);
}

/**
 * Rush badge for rush orders
 */
.rush-badge {
    display: inline-block;
    background-color: var(--color-rush);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-sm);
    text-transform: uppercase;
}

/**
 * Section within the order detail
 */
.detail-section {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.detail-section__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

/**
 * Row within a detail section (label + value)
 */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row__label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.detail-row__value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    text-align: right;
    max-width: 60%;
}

/**
 * Large value styling (for total)
 */
.detail-row__value--large {
    font-size: 1.25rem;
    font-weight: 700;
}

/**
 * Rush value styling
 */
.detail-row__value--rush {
    color: var(--color-rush);
    font-weight: 700;
}


/**
 * Link styling within detail rows
 */
.detail-row__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-primary);
    text-decoration: none;
    word-break: break-all;
}

.detail-row__link:active {
    opacity: 0.7;
}

/**
 * Multi-line value (for addresses)
 */
.detail-row__value--multiline {
    white-space: pre-line;
    line-height: 1.4;
}


/* =============================================================================
   LINE ITEMS TABLE
   ============================================================================= */

/**
 * Container for line items
 */
.line-items {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-sm);
}

.line-items th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: left;
    padding: var(--space-sm) var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.line-items th:last-child {
    text-align: right;
}

.line-items td {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    padding: var(--space-sm) var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.line-items td:last-child {
    text-align: right;
    font-weight: 500;
}

.line-items tr:last-child td {
    border-bottom: none;
}

/**
 * Product description in line items
 */
.line-item__description {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
}


/* =============================================================================
   ORDER TOTALS
   ============================================================================= */

.order-totals {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.order-totals__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: 0.875rem;
}

.order-totals__label {
    color: var(--color-text-secondary);
}

.order-totals__value {
    font-weight: 500;
    color: var(--color-text-primary);
}

.order-totals__row--total {
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.order-totals__row--total .order-totals__label {
    font-weight: 600;
    color: var(--color-text-primary);
}

.order-totals__row--total .order-totals__value {
    font-size: 1.125rem;
    font-weight: 700;
}


/* =============================================================================
   SETTINGS VIEW
   ============================================================================= */

/**
 * Section within the settings view
 */
.settings-section {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.settings-section__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

/**
 * Row within a settings section (label + value)
 */
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row__label {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.settings-row__value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.settings-row__value--success {
    color: var(--color-success);
}

.settings-row__value--error {
    color: var(--color-error);
}

.settings-row__value--muted {
    color: var(--color-text-secondary);
}

/**
 * Note text within settings sections
 */
.settings-section__note {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-sm);
    line-height: 1.4;
}


/* =============================================================================
   SECONDARY BUTTON
   ============================================================================= */

/**
 * Secondary button styling (outline style)
 */
.button-secondary {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-primary);
    background-color: transparent;
    border: 2px solid var(--brand-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    min-height: 48px;
}

.button-secondary:hover {
    background-color: var(--brand-primary);
    color: #FFFFFF;
}

.button-secondary:active {
    opacity: 0.9;
}

/**
 * Danger variant (for logout, delete actions)
 */
.button-secondary--danger {
    color: var(--color-error);
    border-color: var(--color-error);
}

.button-secondary--danger:hover {
    background-color: var(--color-error);
    color: #FFFFFF;
}


/* =============================================================================
   TODO: Add more styles as we build each component
   ============================================================================= */