html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: #f8f9fa;
}

/* Mobile Optimization - Compact Design */
@media (max-width: 767.98px) {
    /* Container adjustments for mobile */
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Card spacing optimization */
    .card {
        margin-bottom: 0.75rem !important;
    }
    
    .card-body {
        padding: 1rem 0.75rem !important;
    }
    
    /* Spacing adjustments */
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    .mt-4 {
        margin-top: 1rem !important;
    }
    
    .mt-2 {
        margin-top: 0.5rem !important;
    }
    
    .pb-3 {
        padding-bottom: 1rem !important;
    }
    
    /* Typography optimization */
    h1.display-4 {
        font-size: 1.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    h5.card-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .card-text {
        font-size: 0.85rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    /* Button optimization */
    .btn {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
        border-radius: 0.375rem !important;
    }
    
    .fa-3x {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Compact navigation */
    .navbar {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    .navbar-brand {
        font-size: 1.1rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .nav-link {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .dropdown-menu {
        font-size: 0.85rem !important;
    }
    
    .dropdown-item {
        padding: 0.5rem 1rem !important;
    }
    
    /* Form optimization */
    .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.5rem 0.75rem !important;
    }
    
    .form-select {
        font-size: 16px !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Table optimization */
    .table {
        font-size: 0.85rem !important;
    }
    
    .table td, .table th {
        padding: 0.5rem !important;
    }
    
    .table-responsive {
        font-size: 0.8rem !important;
    }
    
    /* Alert optimization */
    .alert {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Modal optimization */
    .modal-dialog {
        margin: 0.5rem !important;
    }
    
    .modal-header, .modal-footer {
        padding: 0.75rem !important;
    }
    
    .modal-body {
        padding: 1rem 0.75rem !important;
    }
    
    /* Dashboard card grid optimization */
    .row {
        margin-left: -0.375rem !important;
        margin-right: -0.375rem !important;
    }
    
    .row > [class*="col-"] {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
    
    /* Input group adjustments */
    .input-group .form-control {
        font-size: 16px !important;
    }
    
    /* Pagination */
    .pagination {
        font-size: 0.85rem !important;
    }
    
    .page-link {
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Footer adjustment */
    .footer {
        padding: 1rem 0 !important;
        font-size: 0.8rem !important;
    }
    
    /* Text center adjustment for cards */
    .text-center p {
        margin-bottom: 0.5rem !important;
    }
    
    /* Utility adjustments */
    .d-flex.justify-content-between {
        gap: 0.5rem !important;
    }
    
    .d-flex.align-items-center {
        flex-wrap: wrap !important;
    }
    
    /* Touch-friendly optimizations */
    .btn, .form-control, .form-select {
        min-height: 44px !important; /* Apple's recommended minimum touch target */
    }
    
    /* Improved card layouts for mobile */
    .card-header {
        padding: 0.75rem !important;
        font-size: 1rem !important;
    }
    
    .card-footer {
        padding: 0.75rem !important;
    }
    
    /* Better spacing for lists */
    .list-group-item {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Compact badges and small elements */
    .badge {
        font-size: 0.75rem !important;
        padding: 0.35em 0.65em !important;
    }
    
    /* Loading states */
    .spinner-border-sm {
        width: 1rem !important;
        height: 1rem !important;
    }
    
    /* Better breadcrumb */
    .breadcrumb {
        padding: 0.5rem 0 !important;
        margin-bottom: 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Compact tabs */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Invoice and payment specific mobile optimizations */
    .invoice-header {
        padding: 0.75rem !important;
    }
    
    .payment-summary {
        padding: 0.75rem !important;
    }
    
    /* QR Code and barcode scanner adjustments */
    .qr-code-container {
        padding: 1rem 0.5rem !important;
    }
    
    /* Print button adjustments */
    .print-buttons {
        gap: 0.5rem !important;
    }
    
    .print-buttons .btn {
        flex: 1 !important;
        min-width: auto !important;
    }
}

/* Additional mobile-first improvements */
@media (max-width: 575.98px) {
    /* Extra small devices optimization */
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .card-body {
        padding: 0.75rem 0.5rem !important;
    }
    
    .btn-group .btn {
        font-size: 0.8rem !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    .table-responsive {
        font-size: 0.75rem !important;
    }
    
    /* Stack buttons vertically on very small screens */
    .btn-group-vertical .btn {
        margin-bottom: 0.25rem !important;
    }
    
    /* Very compact dashboard cards */
    .fa-3x {
        font-size: 1.75rem !important;
    }
    
    .card-text {
        display: none !important; /* Hide card descriptions on very small screens */
    }
}

/* Mobile-first responsive design */
.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

/* Enhanced mobile navigation */
@media (max-width: 991.98px) {
    .navbar-collapse {
        border-top: 1px solid rgba(255,255,255,0.1);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    
    .navbar-nav {
        align-items: stretch;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin-bottom: 0;
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    .dropdown-menu {
        border: none;
        box-shadow: none;
        background-color: rgba(255,255,255,0.1);
        margin-top: 0;
    }
    
    .dropdown-item {
        color: rgba(255,255,255,0.9);
        padding: 0.5rem 1.5rem;
    }
    
    .dropdown-item:hover {
        background-color: rgba(255,255,255,0.1);
        color: white;
    }
}

/* Card styling for mobile */
.card {
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  margin-bottom: 1rem;
}

.card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  font-weight: 600;
}

/* Dashboard mobile enhancements */
@media (max-width: 575.98px) {
    .fa-2x {
        font-size: 1.5em !important;
    }
    
    .fa-sm-3x {
        font-size: 2em !important;
    }
    
    .card-title {
        font-size: 1rem !important;
    }
    
    .btn-sm {
        font-size: 0.8rem !important;
        padding: 0.375rem 0.75rem !important;
    }
}

@media (min-width: 576px) {
    .fa-sm-3x {
        font-size: 3em !important;
    }
}

/* Button styling */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
}

/* Mobile button group optimization */
@media (max-width: 767.98px) {
    .btn-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .btn-group .btn {
        border-radius: 0.375rem !important;
        margin: 0 !important;
    }
    
    .text-end .btn-group {
        width: 100% !important;
    }
    
    .text-end .btn-group .btn {
        width: 100% !important;
    }
    
    .text-end .ms-2 {
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
    }
    
    /* Stack form action buttons vertically */
    .form-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .form-actions .btn {
        width: 100% !important;
    }
}

/* Improved mobile table handling */
@media (max-width: 767.98px) {
    .table-responsive {
        border: none !important;
        font-size: 0.8rem !important;
    }
    
    .table-responsive .table {
        margin-bottom: 0 !important;
    }
    
    .table-responsive .table th,
    .table-responsive .table td {
        padding: 0.375rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Better invoice items display on mobile */
    .invoice-item {
        border: 1px solid #dee2e6 !important;
        border-radius: 0.375rem !important;
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        background: white !important;
    }
    
    .invoice-item-header {
        font-weight: bold !important;
        color: #495057 !important;
        font-size: 0.9rem !important;
    }
    
    .invoice-item-value {
        color: #212529 !important;
        font-size: 0.85rem !important;
    }
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

/* Mobile navigation */
.navbar-brand {
  font-weight: 600;
  font-size: 1.25rem;
}

.navbar-nav .nav-link {
  font-weight: 500;
  padding: 0.5rem 1rem;
}

/* Form styling */
.form-control, .form-select {
  border-radius: 0.375rem;
  border: 1px solid #ced4da;
  padding: 0.75rem;
  font-size: 1rem;
}

.form-control:focus, .form-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #495057;
}

/* Mobile table responsiveness */
.table-responsive {
  border-radius: 0.375rem;
}

/* Input group styling */
.input-group-text {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  color: #495057;
  font-weight: 500;
}

/* Modal styling for mobile */
.modal-dialog {
  margin: 0.5rem;
}

@media (min-width: 576px) {
  .modal-dialog {
    margin: 1.75rem auto;
  }
}

/* Custom utility classes */
.text-primary {
  color: #0d6efd !important;
}

.bg-primary {
  background-color: #0d6efd !important;
}

/* Touch-friendly button sizing */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

/* Spacing utilities for mobile */
.mb-mobile {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .mb-mobile {
    margin-bottom: 0;
  }
}

/* Barcode scanner styling */
#barcodeScanner {
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  padding: 1rem;
  border: 1px solid #dee2e6;
}

#barcodeScanner video {
  border-radius: 0.375rem;
  max-width: 100%;
  height: auto;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Alert styling */
.alert {
  border-radius: 0.375rem;
  border: none;
  font-weight: 500;
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}

.alert-success {
  background-color: #d1e7dd;
  color: #0f5132;
}

/* Footer */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
  background-color: #f8f9fa;
  border-top: 1px solid #e7ecf0;
  font-size: 0.875rem;
}

/* Mobile footer optimization */
@media (max-width: 767.98px) {
    .footer {
        position: relative !important;
        line-height: 1.4 !important;
        padding: 0.75rem 0 !important;
        font-size: 0.75rem !important;
        text-align: center !important;
        white-space: normal !important;
    }
    
    html, body {
        margin-bottom: 0 !important;
    }
}

/* PWA styling */
.install-prompt {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: #007bff;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1050;
}

.install-prompt button {
  background: white;
  color: #007bff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  margin: 0 0.5rem;
  font-weight: 600;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}