/* Visit Dock - Mobile-First Responsive CSS */
/* Design tokens are loaded separately in design-tokens.css */

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

body {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.mobile .main-content {
    padding-bottom: 60px;
    padding-top: 0;
}

body.desktop .main-content {
    padding-top: 60px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

/* Navigation */
.top-nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.top-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem;
}

/* Workspace Selector */
.workspace-selector {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    padding: 0.25rem 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.workspace-selector label {
    white-space: nowrap;
    margin-right: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    color: var(--color-text-muted);
}

.workspace-selector select {
    min-width: 200px;
    font-family: var(--font-family);
    min-height: var(--touch-target-min);
}

.workspace-selector select:disabled {
    background: var(--color-bg);
    cursor: not-allowed;
    opacity: 0.7;
}

.nav-brand {
    font-weight: var(--font-weight-semibold);
    font-size: 1.1rem;
    color: var(--color-brand-dark);
    white-space: nowrap;
}

.nav-items {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
}

.nav-items a {
    text-decoration: none;
    color: #333;
    padding: 0.4rem 0.6rem;
    border-radius: var(--border-radius);
    transition: background 0.2s;
    font-size: 0.875rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-items a i {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.nav-items a span {
    margin-left: 0.25rem;
}

.nav-items a:hover,
.nav-items a.active {
    background: var(--color-bg);
    color: var(--color-brand);
    font-weight: var(--font-weight-medium);
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    padding: 0.35rem 0;
    z-index: 1000;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.08);
    height: 60px;
    width: 100%;
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-text-muted);
    padding: 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    text-align: center;
    width: auto;
    box-sizing: border-box;
    min-height: var(--touch-target-min);
    transition: color var(--transition-fast);
}

.bottom-nav .nav-item i {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
    line-height: 1;
    display: block;
}

.bottom-nav .nav-item span {
    line-height: 1;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bottom-nav .nav-item.active {
    color: var(--color-brand);
    font-weight: var(--font-weight-medium);
}

.desktop-only {
    display: none !important;
}

.mobile-only {
    display: block !important;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block !important;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    .bottom-nav {
        display: none !important;
    }
    
    .bottom-nav.mobile-only {
        display: none !important;
    }
}

/* Main Content */
.main-content {
    min-height: 100vh;
    padding: 1rem 0;
}

/* Add top padding to account for fixed navigation */
body.desktop .main-content {
    padding-top: 80px;
}

body.mobile .main-content {
    padding-top: 0;
}

.page-header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    position: relative;
    z-index: 1;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-dark);
    line-height: var(--line-height-tight);
}

.back-link {
    color: var(--color-brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.back-link:hover {
    color: var(--color-brand-dark);
}

/* Cards */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

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

.card-header h2 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-dark);
    line-height: var(--line-height-tight);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    min-height: var(--touch-target-min);
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--color-brand);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-brand-dark);
    color: #fff;
}

.btn-secondary {
    background: var(--color-text-muted);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--color-text);
    color: #fff;
}

.btn-warning {
    background: var(--color-accent);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
    background: #D97706;
    color: #fff;
}

.btn-success {
    background: var(--color-success);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus {
    background: #16A34A;
    color: #fff;
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #DC2626;
    color: #fff;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-family: var(--font-family);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    background: var(--color-surface);
    min-height: var(--touch-target-min);
    transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.1);
}

/* Large input for mobile autocomplete */
@media (max-width: 767px) {
    #store_name {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: var(--spacing-md);
        min-height: var(--touch-target-min);
    }
}

.form-group textarea {
    resize: vertical;
}

/* Input with prefix (e.g., currency) */
.input-with-prefix {
    display: flex;
    align-items: stretch;
}

.input-with-prefix .input-prefix {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
}

.input-with-prefix input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    flex: 1;
}

.input-with-prefix input:focus + .input-prefix,
.input-with-prefix:focus-within .input-prefix {
    border-color: var(--color-brand);
}

.form-inline {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: end;
}

.form-inline .form-group {
    flex: 1;
    min-width: 150px;
    margin-bottom: 0;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    width: auto;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    line-height: 1.2;
}

.badge-success {
    background: var(--color-success);
    color: #fff;
}

.badge-warning,
.badge-accent {
    background: var(--color-accent);
    color: #fff;
}

.badge-danger,
.badge-high {
    background: var(--color-danger);
    color: #fff;
}

.badge-medium {
    background: #F97316;
    color: #fff;
}

.badge-low {
    background: var(--color-success);
    color: #fff;
}

.badge-info {
    background: var(--color-brand);
    color: #fff;
}

.badge-secondary {
    background: var(--color-text-muted);
    color: #fff;
}

.badge-status {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* Draft/Offline States */
.badge-draft {
    background: var(--color-accent);
    color: #fff;
}

.badge-offline {
    background: var(--color-accent);
    color: #fff;
}

.badge-pending {
    background: var(--color-accent);
    color: #fff;
}

.badge-synced {
    background: var(--color-success);
    color: #fff;
}

/* Alerts */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-family);
    line-height: var(--line-height-base);
}

.alert-error {
    background: #FEF2F2;
    color: var(--color-danger);
    border: 1px solid #FECACA;
    font-weight: var(--font-weight-regular);
}

.alert-success {
    background: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
    font-weight: var(--font-weight-regular);
}

.alert-warning,
.alert-offline {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
    font-weight: var(--font-weight-regular);
}

.alert-info {
    background: #EFF6FF;
    color: var(--color-brand-dark);
    border: 1px solid #BFDBFE;
    font-weight: var(--font-weight-regular);
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.data-table th {
    background: var(--color-bg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-dark);
    font-family: var(--font-family);
}

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

/* Lists */
.list-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
    transition: background var(--transition-fast);
}

.list-item:hover {
    background: var(--color-bg);
}

.list-item-content {
    flex: 1;
}

.list-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.list-item-meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-weight: var(--font-weight-regular);
}

.list-item-actions {
    display: flex;
    gap: 0.5rem;
}

/* Filters */
.filters-section {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.filter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-family: var(--font-family);
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
}

/* Search */
.search-section {
    margin-bottom: 1.5rem;
}

.search-form {
    display: flex;
    gap: 0.5rem;
}

.search-input-wrapper {
    display: flex;
    flex: 1;
    gap: 0.5rem;
}

.search-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    min-height: var(--touch-target-min);
    background: var(--color-surface);
    color: var(--color-text);
}

/* KPI Cards */
.kpi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.kpi-icon {
    font-size: 2rem;
    color: var(--color-brand);
}

.kpi-value {
    font-size: 2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-dark);
    font-family: var(--font-family);
    line-height: var(--line-height-tight);
}

.kpi-label {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: var(--font-weight-regular);
    font-family: var(--font-family);
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #ddd;
}

.tab {
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.tab.active {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
    font-weight: var(--font-weight-medium);
}

.tab-content {
    margin-top: 1rem;
}

/* Wizard */
.visit-wizard {
    margin-bottom: 1.5rem;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}

.wizard-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #ddd;
    z-index: 0;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    background: #f5f5f5;
    padding: 0.5rem;
}

.wizard-step .step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family);
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition-base);
}

.wizard-step.active .step-number {
    background: var(--color-brand);
    color: #fff;
}

.wizard-step.completed .step-number {
    background: var(--color-success);
    color: #fff;
}

.wizard-step .step-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
    font-family: var(--font-family);
}

.wizard-step.active .step-label {
    color: var(--color-brand);
    font-weight: var(--font-weight-medium);
}

.wizard-content {
    background: var(--color-surface);
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

/* Checklist */
.checklist-items {
    margin-top: 1rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.checklist-label {
    flex: 1;
}

.checklist-icon {
    font-size: 1.5rem;
    font-weight: bold;
}

.checklist-item.passed .checklist-icon {
    color: var(--color-success);
}

.checklist-item.failed .checklist-icon {
    color: var(--color-danger);
}

/* Photo Gallery */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.photo-item {
    position: relative;
}

.photo-thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1px solid var(--color-border);
}

.photo-preview {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.photo-preview img {
    max-width: 150px;
    max-height: 150px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* Store Cards */
.stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.store-card {
    display: flex;
    flex-direction: column;
}

.store-card-header h3 a {
    color: var(--dark-color);
    text-decoration: none;
}

.store-card-body {
    flex: 1;
}

.store-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: #666;
}

.stat-value {
    font-weight: 500;
}

/* Login */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-box {
    background: var(--color-surface);
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    width: 100%;
    max-width: 400px;
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.login-header h1 {
    color: var(--color-brand-dark);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family);
}

.login-footer {
    text-align: center;
    margin-top: 1rem;
}

.login-footer a {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.login-footer a:hover {
    color: var(--color-brand-dark);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem var(--spacing-md);
    color: var(--color-text-muted);
    font-family: var(--font-family);
}

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

/* Text Utilities */
.text-muted {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

.text-primary {
    color: var(--color-brand);
    font-weight: var(--font-weight-medium);
}

.text-success {
    color: var(--color-success);
}

.text-danger {
    color: var(--color-danger);
}

.text-accent {
    color: var(--color-accent);
}

/* Responsive */
/* Medium screens - more compact navigation */
@media (min-width: 768px) and (max-width: 1200px) {
    .nav-items a {
        font-size: 0.8rem;
        padding: 0.35rem 0.5rem;
    }
    
    .nav-brand {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .bottom-nav.mobile-only {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    .bottom-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    .bottom-nav .nav-item {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: auto !important;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .filter-row {
        flex-direction: column;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .form-inline {
        flex-direction: column;
    }
    
    .form-inline .form-group {
        width: 100%;
    }
    
    .kpi-cards {
        grid-template-columns: 1fr;
    }
    
    .stores-grid {
        grid-template-columns: 1fr;
    }
    
    .data-table {
        font-size: 0.875rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }
    
    /* Make date inputs smaller on mobile */
    .date-input {
        font-size: 14px !important;
        padding: 0.5rem !important;
        max-width: 150px;
    }
    
    .date-filter-section {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .date-filter-section .date-filter-form {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .date-filter-section .date-filter-form > div {
        width: 100%;
    }
    
    .date-filter-section .date-filter-form input[type="date"] {
        width: 100%;
        max-width: 100%;
    }
    
    .date-presets {
        width: 100%;
        justify-content: flex-start;
    }
    
    .date-presets .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Checklist Brand Grouping */
.checklist-brand-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

/* Photo Preview */
.photo-preview {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.photo-preview-item {
    position: relative;
    display: inline-block;
}

.photo-preview-item img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 4px;
    border: 2px solid #ddd;
    display: block;
}

.remove-photo-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.remove-photo-btn:hover,
.remove-photo-btn:focus {
    background: #DC2626;
}

.checklist-brand-section h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-brand-dark);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family);
}

.checklist-brand-section .checklist-item {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-brand);
}

/* Autocomplete */
.autocomplete-suggestions {
    position: absolute;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    margin-top: var(--spacing-xs);
    display: none;
}

.suggestions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.suggestion-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.suggestion-item:hover,
.suggestion-item:focus {
    background: var(--color-bg);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.form-group {
    position: relative;
}

.form-hint {
    display: block;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

@media (max-width: 767px) {
    .suggestion-item {
        padding: 1rem;
        font-size: 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Checklist Items Builder */
.checklist-items-list {
    margin: 1rem 0;
}

.checklist-item-row {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-list .checkbox-label {
    margin-bottom: 0;
}

.sortable-placeholder {
    height: 60px;
    background: var(--color-bg);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

/* Offline & Draft States */
.offline-indicator {
    padding: var(--spacing-sm) var(--spacing-md);
    background: #FFFBEB;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: #92400E;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.offline-indicator i {
    color: var(--color-accent);
}

.draft-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
}

.pending-sync {
    background: var(--color-accent);
    color: #fff;
}

.synced {
    background: var(--color-success);
    color: #fff;
}

/* PWA Optimizations */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Ensure all interactive elements meet touch target minimum */
button,
a.btn,
input[type="submit"],
input[type="button"],
select,
.checkbox-label,
.radio-label {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* Section Titles */
.section-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-dark);
    font-family: var(--font-family);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-tight);
}

/* Page Titles */
.page-title {
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-dark);
    font-family: var(--font-family);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
}

/* ──────────────────────────────────────────────────────────────────────
   GLOBAL FORM NORMALISER
   Many pages render inputs outside of `.form-group` (modals, inline forms,
   share dialogs, route optimizer…). Without these rules each one looked
   slightly different. The selectors below apply to every input/select/
   textarea by default — pages can still override by being more specific.
   The values match the existing .form-group styles so nothing else changes.
   ────────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="color"],
select,
textarea {
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    min-height: 2.5rem;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    /* Reset OS chrome so date/select look the same across browsers. */
    appearance: none;
    -webkit-appearance: none;
}
textarea {
    min-height: 4.5rem;
    resize: vertical;
    line-height: 1.5;
}
select {
    /* Custom dropdown chevron — keeps the same visual on every OS. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'><path d='M4 6l4 4 4-4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 14px 14px;
    padding-right: 2rem;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
    background-color: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}
input::placeholder,
textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}
/* Range / file inputs keep their native chrome but match the layout sizing. */
input[type="file"] {
    font-family: var(--font-family);
    font-size: 0.9rem;
    padding: 0.4rem 0;
}

/* ──────────────────────────────────────────────────────────────────────
   MOBILE: prevent horizontal scroll
   Forces the document and the main containers to never overflow the
   viewport horizontally. Tables and code blocks become scrollable on their
   own (instead of pushing the whole page sideways). Keeps font ≥ 16px in
   inputs to stop iOS from auto-zooming on focus.
   ────────────────────────────────────────────────────────────────────── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
@media (max-width: 768px) {
    /* Block any element from pushing past the viewport. */
    img, video, iframe, embed, object, svg, canvas {
        max-width: 100%;
        height: auto;
    }
    /* Tables: wrap them in horizontal scroll to keep the page itself stable. */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Pre-formatted text and long URLs shouldn't blow the layout up. */
    pre, code {
        white-space: pre-wrap;
        word-break: break-word;
    }
    /* Keep input font-size ≥ 16px so iOS doesn't trigger zoom-on-focus. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px;
    }
    /* Generous tap targets without taking up extra space. */
    .btn, button {
        min-height: 2.5rem;
    }
    /* Common containers — make sure they actually fit. */
    .card, .form, .form-group, .modal-content, .page-header,
    .kpi-grid, .cards-grid, .stats-grid, .visit-info-grid,
    .opt-day-card, .opt-stop-row, .checklist-item-form {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Long words and URLs in card content. */
    .card, .dashboard-card, .stop-name, .opt-stop-name, p, h1, h2, h3, h4 {
        overflow-wrap: anywhere;
    }
    /* Anything that the JS gives a fixed width via inline style — stop that
       from being wider than the screen. Use selectors most likely to bite. */
    .opt-stop-row select, .opt-stop-row input { width: 100%; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Modern uniform refresh — visual layer aligned with the public landing
 * (visitdock.pt). Purely additive: no class names, structures or
 * selectors are renamed. Every override here either retunes a value that
 * already existed, or styles a token (eyebrow / chip / surface) that the
 * landing introduced. Functionality is untouched.
 *
 * Page-specific stylesheets (locations.css, settings.css, sidebar.css,
 * my-workspaces.css) keep working — they consume the same CSS variables
 * we updated in design-tokens.css.
 * ─────────────────────────────────────────────────────────────────────── */

/* ─── Body & rhythm ─────────────────────────────────────────────────── */
body {
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    letter-spacing: -0.005em;
}

/* ─── Top nav with subtle blur, matching the landing header ─────────── */
.top-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-sm);
}
.nav-brand {
    letter-spacing: -0.01em;
    font-weight: var(--font-weight-extrabold);
}

/* ─── Page header — bigger, tighter type, optional eyebrow chip ─────── */
.page-header h1 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.025em;
    color: var(--color-brand-dark);
    line-height: var(--line-height-tight);
}
.page-subtitle {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0.4rem 0 0;
}
.back-link {
    color: var(--color-text-subtle);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}
.back-link:hover {
    color: var(--color-pop);
}

/* New utility: section eyebrow chip — same look as the landing. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-pop-soft);
    color: var(--color-pop);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── Cards: bigger radius, layered shadow, gradient hover ──────────── */
.card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover {
    box-shadow: var(--shadow-md);
}
.card-header h2 {
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
}

/* ─── Buttons: gradient primary with pop shadow, polished hover ─────── */
.btn {
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.005em;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-base),
                background var(--transition-fast),
                border-color var(--transition-fast);
}
.btn:focus-visible {
    outline: 3px solid var(--color-pop-ring);
    outline-offset: 2px;
}
.btn-primary {
    background: var(--color-pop);
    box-shadow: var(--shadow-pop);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-pop-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-pop-strong);
}
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--color-bg);
    border-color: var(--color-text-subtle);
    color: var(--color-text);
}
.btn-success {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.btn-success:hover,
.btn-success:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.32);
}
.btn-warning {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.btn-warning:hover,
.btn-warning:focus {
    transform: translateY(-1px);
}
.btn-danger {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.22);
}
.btn-danger:hover,
.btn-danger:focus {
    transform: translateY(-1px);
}
.btn-sm { border-radius: 8px; }

/* ─── Form fields: 8px radius, focus halo, gentler borders ──────────── */
.form-group label {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    letter-spacing: -0.005em;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-pop);
    box-shadow: 0 0 0 3px var(--color-pop-soft);
}
.form-group small,
.form-group .form-hint {
    color: var(--color-text-subtle);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* ─── Alerts: rounded, soft tints, left-accent bar ──────────────────── */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: 0.85rem 1.1rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.alert-error,
.alert.alert-danger {
    background: var(--color-danger-soft);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991b1b;
}
.alert-success {
    background: var(--color-success-soft);
    border-color: rgba(34, 197, 94, 0.32);
    color: #166534;
}
.alert-warning,
.alert-offline {
    background: var(--color-accent-soft);
    border-color: rgba(245, 158, 11, 0.32);
    color: #92400e;
}
.alert-info {
    background: var(--color-info-soft);
    border-color: rgba(59, 130, 246, 0.3);
    color: #1e3a8a;
}

/* ─── Badges: pill-shaped chips with soft tint backgrounds ──────────── */
.badge {
    border-radius: var(--radius-pill);
    padding: 0.22rem 0.65rem;
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.badge-success,
.badge-synced {
    background: var(--color-success-soft);
    color: #166534;
}
.badge-warning,
.badge-accent,
.badge-pending,
.badge-medium {
    background: var(--color-accent-soft);
    color: #92400e;
}
.badge-danger,
.badge-high {
    background: var(--color-danger-soft);
    color: #991b1b;
}
.badge-info {
    background: var(--color-info-soft);
    color: #1e3a8a;
}
.badge-secondary,
.badge-status,
.badge-draft,
.badge-low {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.badge-offline {
    background: var(--color-accent-soft);
    color: #b45309;
}

/* ─── Tables: rounded edges, zebra, hover ───────────────────────────── */
table {
    border-collapse: separate;
    border-spacing: 0;
}
table th {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
table tbody tr {
    transition: background var(--transition-fast);
}
table tbody tr:hover {
    background: var(--color-bg-soft);
}
table td, table th {
    border-bottom: 1px solid var(--color-border-soft);
}

/* ─── Modals: blurred overlay, refined content ──────────────────────── */
.modal-overlay {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-content {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
}
.modal-header {
    border-bottom-color: var(--color-border-soft);
}
.modal-header h3 {
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
}
.modal-footer {
    border-top-color: var(--color-border-soft);
    background: var(--color-bg-soft);
}

/* ─── Tabs: cleaner underline indicator ─────────────────────────────── */
.tabs {
    border-bottom: 1px solid var(--color-border);
}
.tabs .tab,
.tabs button {
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tabs .tab.active,
.tabs button.active {
    color: var(--color-pop);
    border-bottom-color: var(--color-pop);
}

/* ─── Empty states: more breathing room and a subtle icon halo ──────── */
.empty-state {
    color: var(--color-text-subtle);
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.empty-state i,
.empty-state .fa,
.empty-state svg {
    color: var(--color-pop);
    opacity: 0.5;
}
.empty-state h3 {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
    margin: 0.5rem 0 0.4rem;
}

/* ─── Stat cards (used on dashboards) — gradient values ─────────────── */
.stat-card,
.kpi-card,
.dashboard-card .value,
.opt-summary-value {
    letter-spacing: -0.025em;
}
.opt-summary-value,
.dashboard-stat-value {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ─── Dropdown menus: layered shadow, rounded, padded ───────────────── */
.dropdown-menu {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
    background: var(--color-surface);
}
.dropdown-menu a,
.dropdown-menu button {
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown-menu a:hover,
.dropdown-menu button:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}

/* ─── Links: pop blue with subtle underline on hover ────────────────── */
/* The exclusion list keeps "button-like" links and "selected" link-buttons
   (filter chips, sidebar items, language switchers, landing CTAs) free to
   style their own text color — typically white on a brand background.
   Without these exclusions the global link rule wins on specificity and
   breaks the contrast. New button classes should be added here. */
a:not(.btn):not(.l-btn):not(.rc-btn):not(.rc-mini-btn):not(.landing-btn):not(.back-link):not(.nav-brand):not(.active):not(.is-active):not(.filter-chip) {
    color: var(--color-pop);
    transition: color var(--transition-fast);
}
a:not(.btn):not(.l-btn):not(.rc-btn):not(.rc-mini-btn):not(.landing-btn):not(.back-link):not(.nav-brand):not(.active):not(.is-active):not(.filter-chip):hover {
    color: var(--color-pop-hover);
}

/* Filter chips: shared styling so any page with a `.filters-bar` of chips
   gets the same look. Mirrors the routes listing's local rules. */
.filter-chip {
    color: var(--color-text-muted);
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}
.filter-chip:hover {
    color: var(--color-pop);
    border-color: var(--color-pop);
}
.filter-chip.active,
.filter-chip[aria-selected="true"] {
    color: #fff;
    background: var(--color-brand);
    border-color: var(--color-brand);
}
.filter-chip.active i,
.filter-chip[aria-selected="true"] i {
    color: #fff;
}

/* ─── Scrollbar polish (WebKit only — graceful on others) ───────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.25); background-clip: content-box; }

/* ─── Photo uploader widget (drag-and-drop) ─────────────────────────────
 * Shared by visit-detail.php and new-visit.php so a visit's photos look
 * and feel the same whether you upload on creation or after the fact.
 * Selectors mirror what the JS in both pages already uses
 * (.photo-upload-area, #photo-drop-area, .photo-preview-grid, etc.).
 */
.photo-upload-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-soft);
}
.photo-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    cursor: pointer;
    transition: border-color var(--transition-base),
                background var(--transition-base),
                box-shadow var(--transition-base);
    text-align: center;
}
.photo-upload-area:hover {
    border-color: var(--color-pop);
    background: var(--color-pop-soft);
}
.photo-upload-area.dragover {
    border-color: var(--color-pop);
    background: var(--color-pop-soft);
    box-shadow: 0 0 0 3px var(--color-pop-ring);
}
.photo-upload-area i {
    font-size: 2rem;
    color: var(--color-pop);
    margin-bottom: 0.5rem;
    opacity: 0.85;
}
.photo-upload-area span {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}
.photo-upload-area input[type="file"] {
    display: none;
}
.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.6rem;
    margin-top: var(--spacing-md);
}
.photo-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-sm);
}
.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-preview-item .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-danger);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.25);
    transition: transform var(--transition-fast);
}
.photo-preview-item .remove-btn:hover {
    transform: scale(1.1);
}
.upload-progress {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    display: none;
}
.upload-progress.active { display: block; }
.upload-progress .progress-bar {
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}
.upload-progress .progress-fill {
    height: 100%;
    background: var(--color-pop);
    transition: width 0.3s ease;
}

/* ─── Print: drop the decorative shadows / gradients ────────────────── */
@media print {
    .card, .modal-content, .top-nav, .btn-primary, .stat-card { box-shadow: none !important; }
    .opt-summary-value, .dashboard-stat-value {
        background: none !important;
        color: var(--color-brand-dark) !important;
    }
}