/* ────────────────────────────────────────────────────────
   Size Matters Plugin Styles
   ──────────────────────────────────────────────────────── */

/* Address input container */
#sm-address-input {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Generic content block wrappers (for consistent spacing) */
.sm-content-block {
  margin-bottom: 1em;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Address input fields */
#address,
#edit-address {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* Map containers */
#map,
#edit-map {
  width: 100%;
  height: 400px;
  margin-top: 10px;
}

/* Custom fields wrapper */
#sm-custom-fields {
  margin-top: 20px;
}

/* Table wrapper for horizontal scrolling */
.sm-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1em;
}

/* Area Totals Tables */
#area-total-table,
#edit-area-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  background-image: none;
  margin-top: 10px;
}

/* Table header */
#area-total-table thead th,
#edit-area-table thead th {
  background-color: #f2f2f2;
  color: #333333;
  font-weight: bold;
  text-align: left;
  padding: 8px;
  border: 1px solid #ddd;
}

/* Body cells: dark text, solid border */
#area-total-table tbody td,
#edit-area-table tbody td {
  color: #000000;
  padding: 8px;
  border: 1px solid #ddd;
}

/* Zebra striping */
#area-total-table tbody tr:nth-child(odd) td,
#edit-area-table tbody tr:nth-child(odd) td {
  background-color: #ffffff;
}
#area-total-table tbody tr:nth-child(even) td,
#edit-area-table tbody tr:nth-child(even) td {
  background-color: #f9f9f9;
}

/* Hover highlight */
#area-total-table tbody tr:hover td,
#edit-area-table tbody tr:hover td {
  background-color: #f5f5f5;
}

/* Polygon Notes & Controls */
#polygon-notes,
#edit-notes {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

/* Clear button styling */
.clear-button button {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
.clear-button button:hover {
  background-color: #333333;
  color: #ffffff;
}
.clear-button button:focus {
  outline: none;
}

/* Saved entries controls */
#saved-areas {
  padding: 6px;
  margin-right: 8px;
}
#refresh-saved-areas,
#save-polygons,
#clone-polygons {
  padding: 6px 12px;
  cursor: pointer;
}

/* ────────────────────────────────────────────────────────
   Tabs UI (desktop & tablet)
   ──────────────────────────────────────────────────────── */
.sm-tabs-buttons {
  margin-bottom: 10px;
  display: flex;                       /* make tabs flex */
  overflow-x: auto;                    /* scroll when too many */
  -webkit-overflow-scrolling: touch;   /* smooth on iOS */
}
.sm-tab-button {
  flex: 0 0 auto;      /* keep natural width */
  white-space: nowrap;  /* no wrapping */
  margin-right: 5px;
  padding: 4px 8px;
  cursor: pointer;
}
.sm-tab-button.active {
  font-weight: bold;
  background-color: #0073aa;
  color: #ffffff;
}
.sm-tab-content {
  display: none;
}
.sm-tab-content.active {
  display: block;
}

/* Mobile dropdown elements (hidden by default) */
.sm-dropdown-label,
.sm-tab-dropdown {
  display: none;
}

/* ────────────────────────────────────────────────────────
   Loading Spinner
   ──────────────────────────────────────────────────────── */
#sm-loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: none;
}
.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #555;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ────────────────────────────────────────────────────────
   Suppress Google Maps Branding & Controls
   ──────────────────────────────────────────────────────── */
.gm-style .gm-style-cc,
.gm-style .gm-style-cc a,
.gm-style .gm-style-cc a:hover,
.gm-style .gm-style-mtc,
.gm-style .gm-style-mtc div {
  display: none;
}

/* InfoWindow label text */
.sm-info-label {
  color: #000 !important;
  font-weight: bold;
  font-size: 14px;
}

/* Table footer (“Total Area”) styling */
#area-total-table tfoot td,
#edit-area-table tfoot td {
  color: #000 !important;
  background: #fff !important;
  font-weight: bold;
  padding-top: 8px;
}
#area-total-table tfoot tr,
#edit-area-table tfoot tr {
  background-color: #f2f9f9 !important;
}

/* Default map height (overrideable) */
#map,
#edit-map,
#admin-map {
  width: 100%;
  height: 600px;
  margin-top: 10px;
}
#edit-map {
  margin-bottom: 1em;
}
.admin #admin-map {
  margin: 20px 0;
}
#admin-map {
  height: 400px;
  margin: 20px 0;
}

/* Force Pegman styling */
.gm-svpc {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.gm-svpc:hover {
  background-color: #f7f7f7 !important;
}

/* ────────────────────────────────────────────────────────
   Responsive Breakpoints
   ──────────────────────────────────────────────────────── */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .sm-tab-button {
    padding: 0.6em 1em;
    font-size: 0.95rem;
  }
  .sm-content-block,
  .sm-tab-content {
    padding: 0.75em;
  }
}

/* Mobile landscape (≤768px) */
@media (max-width: 768px) {
  .sm-tab-button {
    padding: 0.5em 0.8em;
    font-size: 0.9rem;
  }
  .sm-content-block,
  .sm-tab-content {
    padding: 0.5em;
  }
}

/* ────────────────────────────────────────────────────────
   Dynamic dropdown trigger when tabs overflow
   ──────────────────────────────────────────────────────── */

/* hide normal tabs & show dropdown/label when .use-dropdown is added */
.sm-tabs-wrapper.use-dropdown .sm-tabs-buttons {
  display: none;
}
.sm-tabs-wrapper.use-dropdown .sm-dropdown-label {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.9rem;
  color: #333;
}
.sm-tabs-wrapper.use-dropdown .sm-tab-dropdown {
  display: block;
  width: 100%;
  margin-bottom: 0.75em;
  padding: 0.5em;
  font-size: 1rem;
  box-sizing: border-box;
}