/* ============================================
   Home Dashboard Styles - Mobile PWA First
   ============================================ */

/* ============================================
   CRITICAL: Remove article.content padding for Home page
   The Home dashboard handles its own padding via .home-dashboard.
   This prevents double padding from MainLayout's article.content px-4 py-3.
   ============================================ */
article.content:has(.home-dashboard) {
    padding: 0 !important;
}

/* 
 * Remove main-content-container bottom padding for Home
 * Home dashboard handles its own bottom padding via .home-dashboard class
 * NOTE: Do NOT override scroll behavior here - MainLayout.razor.css is the
 * single source of truth for scroll handling.
 */
.main-content-container:has(.home-dashboard) {
    padding-bottom: 0 !important;
}

/* Base Dashboard */
/* NOTE: Do NOT add padding-top for safe-area here - it's handled by 
   .is-pwa .page in mobile-core.css to avoid double padding in PWA mode.
   Horizontal padding matches Jobs page (px-2 = 8px on mobile). */
.home-dashboard {
    padding: 8px;
    padding-top: 16px;
    /* 
     * UNIFIED BOTTOM PADDING FORMULA
     * ==============================
     * Matches MainLayout.razor.css for consistency across all pages.
     * Components: bottom-nav (56px) + safe-area + buffer (16px)
     */
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
    background: var(--bb-bg-secondary, #F2F2F7);
    /* 
     * Height should be auto to work naturally with flex scroll container.
     * The parent .main-content-container handles scrolling.
     */
    min-height: auto;
    height: auto;
    /* Display as block for proper document flow */
    display: block;
}

/* PWA mode: reduce top padding since .page already handles safe area */
.is-pwa .home-dashboard {
    padding-top: 8px;
}

/* iOS Safari browser mode (not PWA): extra space for Safari toolbar */
body.is-ios:not(.is-pwa) .home-dashboard {
    /* Extra 44px for Safari toolbar at bottom (matches MainLayout formula) */
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 44px + 16px);
}

/* Dashboard Header */
.dashboard-header {
    margin-bottom: 20px;
}

.dashboard-header .greeting {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: var(--bb-text-primary, #1c1c1e);
}

.dashboard-header .date-display {
    font-size: 15px;
    color: var(--bb-text-secondary, #8e8e93);
    margin: 4px 0 0 0;
}

/* ============================================
   Job Timer Banner - Sticky Active Job
   ============================================ */
.job-timer-banner {
    position: sticky;
    /* In PWA mode, .page already has padding-top for safe area, so use top: 0 */
    /* In browser mode, we need to account for the safe area */
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #1b6ec2, #0d47a1);
    color: white;
    border-radius: 12px;
    margin-bottom: 16px;
    margin-top: 0; /* Ensure no extra top margin */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Non-PWA browser mode: account for safe area in sticky positioning */
body:not(.is-pwa) .job-timer-banner {
    top: env(safe-area-inset-top, 0);
}

.timer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.timer-job-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.timer-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px;
    white-space: nowrap;
}

.timer-job-number {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timer-display {
    font-size: 24px;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    margin: 0 12px;
}

.timer-header i {
    font-size: 18px;
    opacity: 0.8;
}

.timer-details {
    padding: 0 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
}

.timer-customer {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.timer-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.timer-service-tag {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.timer-actions {
    display: flex;
    gap: 12px;
}

.btn-timer-action {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.btn-timer-action.pause {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-timer-action.pause:active {
    background: rgba(255, 255, 255, 0.3);
}

.btn-timer-action.complete {
    background: #28a745;
    color: white;
}

.btn-timer-action.complete:active {
    background: #218838;
}

/* ============================================
   Today's Jobs Card
   ============================================ */
.todays-jobs-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .todays-jobs-card {
    background: var(--bb-bg-secondary, #1c1c1e);
}

.todays-jobs-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--bb-border-light, #e5e5ea);
}

[data-bs-theme="dark"] .todays-jobs-card .card-header {
    border-bottom-color: var(--bb-border-color, #38383a);
}

.todays-jobs-card .card-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.job-count {
    background: var(--bb-primary, #007AFF);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.view-all {
    color: var(--bb-primary, #007AFF);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-all:hover {
    text-decoration: underline;
}

.jobs-list {
    padding: 8px;
}

.job-card {
    display: flex;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--bb-bg-secondary, #F2F2F7);
    align-items: flex-start;
}

[data-bs-theme="dark"] .job-card {
    background: var(--bb-bg-tertiary, #2c2c2e);
}

.job-card:last-child {
    margin-bottom: 0;
}

.job-card.completed {
    opacity: 0.6;
}

.job-card.in-progress {
    background: linear-gradient(135deg, rgba(27, 110, 194, 0.1), rgba(27, 110, 194, 0.05));
    border-left: 3px solid var(--bb-primary, #007AFF);
}

.job-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-primary, #007AFF);
    min-width: 70px;
    padding-top: 2px;
}

.job-info {
    flex: 1;
    min-width: 0;
}

.job-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.job-number {
    font-weight: 600;
    font-size: 14px;
    color: var(--bb-text-primary, #1c1c1e);
}

.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.status-badge.completed {
    background: rgba(52, 199, 89, 0.15);
    color: #34C759;
}

.status-badge.in-progress {
    background: rgba(0, 122, 255, 0.15);
    color: #007AFF;
}

.job-customer {
    font-size: 15px;
    font-weight: 500;
    margin-top: 2px;
    color: var(--bb-text-primary, #1c1c1e);
}

.job-services {
    font-size: 13px;
    color: var(--bb-text-secondary, #8e8e93);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--bb-success, #34C759);
    margin-top: 4px;
}

.job-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 8px;
}

.action-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
}

.action-btn.directions {
    background: #e3f2fd;
    color: #1976d2;
}

.action-btn.directions:active {
    background: #bbdefb;
}

.action-btn.call {
    background: #e8f5e9;
    color: #388e3c;
}

.action-btn.call:active {
    background: #c8e6c9;
}

.action-btn.start {
    background: var(--bb-primary, #007AFF);
    color: white;
}

.action-btn.start:active {
    background: #0056b3;
}

/* No Jobs State */
.no-jobs {
    padding: 40px 20px;
    text-align: center;
    color: var(--bb-text-secondary, #8e8e93);
}

.no-jobs i {
    font-size: 48px;
    opacity: 0.5;
    display: block;
    margin-bottom: 8px;
}

.no-jobs p {
    margin: 12px 0 16px;
    font-size: 15px;
}

/* ============================================
   Daily Log Card
   ============================================ */
.daily-log-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .daily-log-card {
    background: var(--bb-bg-secondary, #1c1c1e);
}

.daily-log-card .card-header {
    margin-bottom: 12px;
}

.daily-log-card .card-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-not-started {
    text-align: center;
    padding: 20px 0;
}

.log-not-started p {
    margin: 0 0 16px;
    color: var(--bb-text-secondary, #8e8e93);
}

.log-summary {
    margin: 12px 0;
}

.log-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border-light, #e5e5ea);
}

[data-bs-theme="dark"] .log-row {
    border-bottom-color: var(--bb-border-color, #38383a);
}

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

.log-label {
    color: var(--bb-text-secondary, #8e8e93);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.log-value {
    font-weight: 600;
    font-size: 14px;
    color: var(--bb-text-primary, #1c1c1e);
}

.log-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.log-actions .btn {
    flex: 1;
    min-height: 44px;
    font-weight: 500;
}

/* ============================================
   Quick Actions Section
   ============================================ */
.quick-actions-section {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .quick-actions-section {
    background: var(--bb-bg-secondary, #1c1c1e);
}

.quick-actions-section .section-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
}

.quick-actions-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    border-radius: 12px;
    text-decoration: none;
    background: var(--bb-bg-secondary, #F2F2F7);
    min-height: 80px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s;
}

[data-bs-theme="dark"] .quick-action-btn {
    background: var(--bb-bg-tertiary, #2c2c2e);
}

.quick-action-btn:active {
    transform: scale(0.95);
}

.quick-action-btn i {
    font-size: 24px;
    margin-bottom: 6px;
}

.quick-action-btn span {
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-text-primary, #1c1c1e);
    text-align: center;
}

.quick-action-btn.quotes {
    color: #FF9500;
}

.quick-action-btn.jobs {
    color: #007AFF;
}

.quick-action-btn.invoices {
    color: #34C759;
}

/* ============================================
   Navigation Cards Section (Condensed)
   ============================================ */
.nav-cards-section {
    margin-bottom: 16px;
}

.nav-cards-section .section-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
}

.nav-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.nav-card-compact {
    display: flex;
    align-items: center;
    padding: 14px;
    border-radius: 12px;
    background: white;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s;
}

[data-bs-theme="dark"] .nav-card-compact {
    background: var(--bb-bg-secondary, #1c1c1e);
}

.nav-card-compact:active {
    transform: scale(0.98);
}

.nav-card-compact .nav-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 12px;
}

.nav-card-compact .nav-icon.leads {
    background: rgba(0, 122, 255, 0.15);
    color: #007AFF;
}

.nav-card-compact .nav-icon.customers {
    background: rgba(52, 199, 89, 0.15);
    color: #34C759;
}

.nav-card-compact .nav-icon.quotes {
    background: rgba(255, 149, 0, 0.15);
    color: #FF9500;
}

.nav-card-compact .nav-icon.jobs {
    background: rgba(90, 200, 250, 0.15);
    color: #5AC8FA;
}

.nav-card-compact .nav-icon.invoices {
    background: rgba(88, 86, 214, 0.15);
    color: #5856D6;
}

.nav-card-compact .nav-icon.reports {
    background: rgba(255, 45, 85, 0.15);
    color: #FF2D55;
}

.nav-card-compact .nav-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--bb-text-primary, #1c1c1e);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (min-width: 768px) {
    .home-dashboard {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .quick-actions-grid-compact {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .job-actions {
        flex-direction: row;
    }
}

@media (min-width: 992px) {
    .home-dashboard {
        max-width: 800px;
    }
}

/* ============================================
   Debug Section (for development/troubleshooting)
   ============================================ */
.debug-section {
    margin-top: 24px;
    padding: 16px;
    background: var(--bb-bg-tertiary, #E5E5EA);
    border-radius: 12px;
    border: 1px dashed var(--bb-border-color, #C7C7CC);
}

[data-bs-theme="dark"] .debug-section {
    background: var(--bb-bg-tertiary, #2c2c2e);
    border-color: var(--bb-border-color, #38383A);
}

.debug-section .btn {
    font-weight: 500;
}

.debug-section small {
    font-size: 11px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}