:root{--bg:#f7fbfa;--surface:#ffffff;--text:#10201f;--muted:#5a7d78;--border:#cfe2de;--accent:#eeb3c4;--accent-contrast:#1a1a1a;--shadow:0 1px 2px rgba(18,38,35,.08),0 6px 18px rgba(18,38,35,.12);--safe-top:env(safe-area-inset-top);--safe-right:env(safe-area-inset-right);--safe-bottom:env(safe-area-inset-bottom);--safe-left:env(safe-area-inset-left)}
html,body{background:var(--bg);color:var(--text)}
.navbar{background:linear-gradient(180deg,#e8f3f1 0%,#d8e9e6 100%)!important;border-bottom:1px solid #c7dcd7}
.navbar{padding-top:calc(.5rem + max(var(--safe-top),0px));padding-left:calc(1rem + max(var(--safe-left),0px));padding-right:calc(1rem + max(var(--safe-right),0px))}
.navbar .navbar-brand,.navbar .nav-link,.navbar .navbar-text{color:#0f1a1a!important}
.navbar .nav-link:hover{color:#e09bb1!important}
.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.card-header{background:#eef5f3;color:#10201f;border-bottom:1px solid #c7dcd7}
.btn{border-radius:10px}
.btn-primary,.bg-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-contrast)!important}
.btn-success{background:#94c7be!important;border-color:#94c7be!important;color:#10201f!important}
.btn-outline-danger{color:#eeb3c4!important;border-color:#f2c7d4!important}
.btn-outline-danger:hover{background:#eeb3c4!important;color:#1a1a1a!important;border-color:#eeb3c4!important}
.form-control,.form-select{background:#ffffff;border:1px solid var(--border);color:var(--text)}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(238,179,196,.15);border-color:#eeb3c4}
a{color:#eeb3c4;text-decoration:underline}
a:hover{text-decoration:none}
.alert-info{background:#f0f7f5;border-color:#cfe2de;color:#10201f}
.table{color:var(--text)}
.table thead th{border-bottom-color:var(--border)}
.table td,.table th{border-color:var(--border)}

/* Mobile-first responsive design */
@media (max-width: 768px) {
  .container { padding-left: 15px; padding-right: 15px; }
  .navbar-nav { text-align: center; }
  .navbar-nav .nav-link { padding: 12px 8px; margin: 2px 0; }
}

/* Ensure minimum tap target size (44px) */
.nav-link, .btn, .form-control, .form-select, input[type="submit"], input[type="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Mobile-friendly form elements */
@media (max-width: 768px) {
  .form-control, .form-select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 12px 16px;
  }
  
  .btn {
    padding: 12px 20px;
    font-size: 16px;
  }
  
  .card {
    margin-bottom: 20px;
  }
  
  .table-responsive {
    font-size: 14px;
  }
}

/* Loading states and skeletons */
.loading-skeleton {
  background: linear-gradient(90deg, #e8f3f1 25%, #d8e9e6 50%, #e8f3f1 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Disable hover effects on mobile */
@media (hover: none) and (pointer: coarse) {
  .btn:hover, .nav-link:hover, a:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Mobile navigation improvements */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1.2rem;
  }
  
  .navbar-toggler {
    padding: 8px 12px;
    border: 1px solid rgba(18,38,35,0.15);
  }
  
  .navbar-collapse {
    background: rgba(232,243,241,0.95);
    border-radius: 8px;
    margin-top: 10px;
    padding: 15px;
  }
}