/* Reset inside ng-app to prevent WordPress theme conflicts */
#ng-root, #ng-app { display: block; }
#ng-app * { box-sizing: border-box; margin: 0; padding: 0; }
#ng-app { font-family: system-ui, -apple-system, sans-serif; color: #1a1a1a; background: #f5f5f3; min-height: 70vh; border-radius: 12px; overflow: hidden; }
#ng-app .topbar { background: #fff; border-bottom: 1px solid #e8e8e5; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
#ng-app .logo { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: #1a1a1a; }
#ng-app .logo span { color: #1D9E75; }
#ng-app .nav { display: flex; gap: 3px; }
#ng-app .nav button { padding: 7px 13px; border: none !important; background: transparent !important; border-radius: 8px !important; font-size: 13px !important; cursor: pointer; color: #666 !important; transition: all .15s; font-weight: 400 !important; box-shadow: none !important; }
#ng-app .nav button.active { background: #f0f0ee !important; color: #1a1a1a !important; font-weight: 500 !important; }
#ng-app .nav button:hover:not(.active) { background: #f5f5f3 !important; }
#ng-app .nav-right { display: flex; align-items: center; gap: 8px; }
#ng-app .logout-btn { font-size: 12px !important; color: #999 !important; cursor: pointer; padding: 6px 10px !important; border-radius: 6px !important; border: 1px solid #e0e0e0 !important; background: transparent !important; box-shadow: none !important; font-weight: 400 !important; }
#ng-app .logout-btn:hover { background: #f5f5f3 !important; }
#ng-app .content { padding: 24px; max-width: 1100px; margin: 0 auto; }
#ng-app .section { display: none; }
#ng-app .section.active { display: block; }
#ng-app .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
#ng-app .page-title { font-size: 19px; font-weight: 600; color: #1a1a1a; }
#ng-app .cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
#ng-app .metric-card { background: #fff; border-radius: 10px; padding: 16px; border: 1px solid #e8e8e5; }
#ng-app .metric-label { font-size: 12px; color: #888; margin-bottom: 5px; }
#ng-app .metric-value { font-size: 26px; font-weight: 600; color: #1a1a1a; }
#ng-app .card { background: #fff; border: 1px solid #e8e8e5; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
#ng-app .btn { padding: 8px 15px !important; border-radius: 8px !important; font-size: 13px !important; cursor: pointer; border: 1px solid #d0d0d0 !important; background: #fff !important; color: #1a1a1a !important; transition: all .15s; box-shadow: none !important; font-weight: 400 !important; }
#ng-app .btn:hover { background: #f5f5f3 !important; }
#ng-app .btn-primary { background: #1D9E75 !important; border-color: #1D9E75 !important; color: #fff !important; }
#ng-app .btn-primary:hover { background: #0F6E56 !important; border-color: #0F6E56 !important; }
#ng-app .btn-danger { border-color: #e74c3c !important; color: #e74c3c !important; background: transparent !important; }
#ng-app .btn-sm { padding: 5px 10px !important; font-size: 12px !important; }
#ng-app table { width: 100%; border-collapse: collapse; font-size: 13px; }
#ng-app th { text-align: left; padding: 8px 12px; color: #888; font-weight: 400; border-bottom: 1px solid #e8e8e5; }
#ng-app td { padding: 10px 12px; border-bottom: 1px solid #f0f0ee; color: #1a1a1a; }
#ng-app tr:last-child td { border-bottom: none; }
#ng-app .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; }
#ng-app .badge-green { background: #E1F5EE; color: #0F6E56; }
#ng-app .badge-amber { background: #FAEEDA; color: #854F0B; }
#ng-app .badge-red { background: #FCEBEB; color: #A32D2D; }
#ng-app .badge-blue { background: #E6F1FB; color: #185FA5; }
#ng-app .badge-gray { background: #f0f0ee; color: #555; }
#ng-app .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
#ng-app .modal-overlay > div h3 { font-size: 17px; font-weight: 600; margin-bottom: 18px; color: #1a1a1a; }
#ng-app .form-group { margin-bottom: 13px; }
#ng-app .form-group label { display: block; font-size: 12px; color: #666; margin-bottom: 4px; }
#ng-app .form-group input, #ng-app .form-group select, #ng-app .form-group textarea { width: 100%; padding: 8px 11px; border: 1px solid #d8d8d5 !important; border-radius: 7px; font-size: 13px; background: #fff !important; color: #1a1a1a; font-family: inherit; box-shadow: none !important; }
#ng-app .form-group textarea { min-height: 75px; resize: vertical; }
#ng-app .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#ng-app .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
#ng-app .vehicles-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 12px; }
#ng-app .vehicle-card { background: #fff; border: 1px solid #e8e8e5; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 14px; }
#ng-app .vehicle-icon { width: 50px; height: 50px; border-radius: 10px; background: #E1F5EE; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
#ng-app .vehicle-info { flex: 1; }
#ng-app .vehicle-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
#ng-app .vehicle-sub { font-size: 12px; color: #888; margin-top: 2px; }
#ng-app .vehicle-actions { display: flex; gap: 5px; flex-shrink: 0; }
#ng-app .tab-bar { display: flex; border-bottom: 1px solid #e8e8e5; margin-bottom: 20px; }
#ng-app .tab { padding: 9px 16px !important; border: none !important; background: transparent !important; font-size: 13px !important; cursor: pointer; color: #888 !important; border-bottom: 2px solid transparent !important; transition: all .15s; margin-bottom: -1px; box-shadow: none !important; font-weight: 400 !important; }
#ng-app .tab.active { color: #1D9E75 !important; border-bottom-color: #1D9E75 !important; font-weight: 500 !important; }
#ng-app .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-top: 10px; }
#ng-app .cal-day-header { text-align: center; font-size: 11px; color: #888; padding: 5px 0; }
#ng-app .cal-day { min-height: 68px; border: 1px solid #e8e8e5; border-radius: 6px; padding: 5px; background: #fff; }
#ng-app .cal-day.other-month { background: #f9f9f7; opacity: .6; }
#ng-app .cal-day.today { border-color: #1D9E75; }
#ng-app .cal-num { font-size: 11px; color: #888; margin-bottom: 3px; }
#ng-app .cal-event { background: #E1F5EE; color: #0F6E56; font-size: 10px; padding: 2px 5px; border-radius: 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ng-app .search-bar { display: flex; gap: 8px; margin-bottom: 14px; }
#ng-app .search-bar input { flex: 1; padding: 8px 11px; border: 1px solid #d8d8d5 !important; border-radius: 7px; font-size: 13px; box-shadow: none !important; }
#ng-app .empty-state { text-align: center; padding: 40px 20px; color: #aaa; }
#ng-app .contract-box { background: #fafaf8; border: 1px solid #e0e0dc; border-radius: 8px; padding: 20px; font-size: 12px; line-height: 1.8; color: #333; white-space: pre-wrap; font-family: Georgia,serif; margin-top: 12px; }
@media(max-width:700px){
  #ng-app .cards-grid { grid-template-columns: repeat(2,1fr); }
  #ng-app .nav button { padding: 6px 9px !important; font-size: 12px !important; }
  #ng-app .form-row { grid-template-columns: 1fr; }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 768px) {

  /* Topbar */
  #ng-app .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }
  #ng-app .logo { font-size: 16px; }
  #ng-app .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    flex-wrap: nowrap;
    gap: 2px;
  }
  #ng-app .nav button {
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #ng-app .nav-right { gap: 6px; }
  #ng-app #ng-username { display: none; }
  #ng-app .logout-btn { font-size: 11px !important; padding: 5px 8px !important; }

  /* Content */
  #ng-app .content { padding: 14px; }

  /* Metrics grid - 2 columns on mobile */
  #ng-app .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  #ng-app .metric-card { padding: 12px; }
  #ng-app .metric-value { font-size: 20px; }
  #ng-app .metric-label { font-size: 11px; }

  /* Page header */
  #ng-app .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #ng-app .page-title { font-size: 16px !important; }

  /* Tables - horizontal scroll */
  #ng-app table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }
  #ng-app th, #ng-app td { padding: 8px 8px !important; white-space: nowrap; }

  /* Vehicle cards - single column */
  #ng-app .vehicles-grid {
    grid-template-columns: 1fr;
  }
  #ng-app .vehicle-card { padding: 12px; gap: 10px; }
  #ng-app .vehicle-icon { width: 40px; height: 40px; font-size: 18px; }
  #ng-app .vehicle-name { font-size: 13px; }

  /* Forms */
  #ng-app .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  #ng-app .form-group input,
  #ng-app .form-group select,
  #ng-app .form-group textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Modal */
  #ng-app .modal-overlay > div {
    width: 95vw !important;
    padding: 18px !important;
    margin: 10px;
  }

  /* Buttons */
  #ng-app .btn { padding: 8px 12px !important; font-size: 12px !important; }
  #ng-app .btn-primary { padding: 10px 14px !important; }

  /* Calendar */
  #ng-app .cal-grid { gap: 2px; }
  #ng-app .cal-day { min-height: 44px; padding: 3px; }
  #ng-app .cal-num { font-size: 10px; }
  #ng-app .cal-event { font-size: 9px; padding: 1px 3px; }
  #ng-app .cal-day-header { font-size: 10px; padding: 3px 0; }

  /* Contract box */
  #ng-app .contract-box { font-size: 11px !important; padding: 14px !important; }

  /* Tabs */
  #ng-app .tab { padding: 8px 12px !important; font-size: 12px !important; }

  /* Search bar */
  #ng-app .search-bar input { font-size: 16px !important; }

  /* Export/Import buttons in dashboard */
  #ng-app .page-header > div { flex-wrap: wrap; }
}

@media (max-width: 400px) {
  #ng-app .cards-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  #ng-app .metric-value { font-size: 18px; }
  #ng-app .nav button { padding: 5px 8px !important; font-size: 11px !important; }
}