/* Mobile and Responsive Styles */
@media (max-width: 600px) {
  .grid-status-center {
    /* Resets the 85px Desktop margin to 0 so Mobile calculation works alone */
    margin-top: 0px !important;
  }
  .grid-status-indicator {
    /* FIX: Dynamic spacing that respects the iPhone notch/status bar */
    /* 70px (header) + Safe Area + 20px gap */
    margin-top: calc(75px + env(safe-area-inset-top));
  }

  .motor-box {
    width: 92vw;
    max-width: 355px;
    margin: 16px auto;
    padding: 22px 10px 12px 10px;
    border-radius: 20px;
  }

  .motor-blackbox {
    padding: 16px 9px 32px 9px;
    border-radius: 12px;
    min-height: 120px;
  }

  .motor-label-editable {
    gap: 10px;
  }

  .motor-label {
    font-size: 1.36em;
    min-width: 80px;
    padding: 5px 15px 5px 5px;
  }

  .icon-btn svg {
    width: 2.7em;
    height: 2.7em;
  }

  .btn {
    width: 90px; /* Bigger, touch-friendly */
    height: 90px;
    font-size: 1.7em;
    border-radius: 50%; /* Fully round */
    box-shadow: 0 2px 18px 0 #0002;
  }

  .motor-actions {
    gap: 80px; /* Kept your larger gap preference */
  }

  .motor-timer {
    font-size: 2.25em;
    margin-top: 10px;
  }

  .motor-status-indicator {
    width: 18px;
    height: 18px;
  }

  /* --- HEADER FIXES --- */
  .app-header {
    /* REMOVED fixed height (68px). 
       Now it uses the smart calculation from layout.css */
    padding: 0 1rem; /* Ensure padding stays consistent */
  }

  .app-logo {
    height: 40px; /* Slightly smaller for mobile if needed */
  }

  .profile-icon,
  .header-icon {
    width: 34px;
    height: 34px;
  }

  .log-panel,
  .motor-log-panel {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    left: 0;
    right: 0;
  }

  .timer-stepper {
    /* 1. Force side margins to match the Black Box above (10px) */
    margin: 0 10px 8px 10px !important;

    /* 2. Shrink internal padding/gap so it fits on small phones */
    padding: 6px !important;
    gap: 8px !important;
  }

  /* 3. The Display (Updated for Wide Control Bar) */
  .step-display {
    /* REMOVE fixed width so it is allowed to grow */
    width: auto !important;

    /* FORCE it to fill all available space between buttons */
    flex: 1 !important;

    font-size: 1.4rem !important;
  }

  /* 4. Make the Buttons smaller */
  .step-btn {
    width: 45px !important; /* Reduced from 50px */
    height: 45px !important;
  }
}

@media (max-width: 380px) {
  .gauge-wrapper {
    width: 130px; /* Slightly smaller on tiny phones */
    height: 130px;
  }
  .gauge-value {
    font-size: 2.4rem;
  }
  .gauges-container {
    gap: 10px;
  }
}