/*────────────────────────────────────────────────────────
  TABLE OF CONTENTS
  ────────────────────────────────────────────────────────
  1.0 - Base & Container Styles
    1.1 - Address Input Container
    1.2 - Content Block Wrappers
    1.3 - Map Containers
    1.4 - Custom Fields Wrapper
  
  2.0 - Tables & Area Totals
    2.1 - Table Wrapper (Horizontal Scroll)
    2.2 - Area Totals Tables
    2.3 - Table Header
    2.4 - Table Body Cells
    2.5 - Zebra Striping
    2.6 - Hover Highlight
    2.7 - Table Footer (Total Area)
  
  3.0 - Form Elements
    3.1 - Polygon Notes & Controls
    3.2 - Clear Button Styling
    3.3 - Saved Entries Controls
  
  4.0 - Tabs UI (Desktop & Tablet)
    4.1 - Tabs Buttons Container
    4.2 - Tab Button Styles
    4.3 - Tab Content
    4.4 - Mobile Dropdown Elements (Hidden by Default)
  
  5.0 - Loading Spinner
  
  6.0 - Google Maps Branding Overrides
    6.1 - Suppress Google Branding
    6.2 - InfoWindow Label
    6.3 - Pegman (Street View) Styling
  
  7.0 - Responsive Breakpoints
    7.1 - Tablet (≤1024px)
    7.2 - Mobile Landscape (≤768px)
    7.3 - Dynamic Dropdown Trigger (Overflow Detection)
────────────────────────────────────────────────────────*/

/* ========================================================
   1.0 - BASE & CONTAINER STYLES
   ======================================================== */

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

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

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

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

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

/* ========================================================
   2.0 - TABLES & AREA TOTALS
   ======================================================== */

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

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

/* 2.3 - 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;
}

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

/* 2.5 - 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;
}

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

/* ========================================================
   3.0 - FORM ELEMENTS
   ======================================================== */

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

/* 3.2 - 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;
}

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

/* ========================================================
   4.0 - TABS UI (DESKTOP & TABLET)
   ======================================================== */

/* 4.1 - Tabs buttons container */
.sm-tabs-buttons {
  margin-bottom: 10px;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4.2 - Tab button styles */
.sm-tab-button {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 5px;
  padding: 4px 8px;
  cursor: pointer;
}
.sm-tab-button.active {
  font-weight: bold;
  background-color: #0073aa;
  color: #ffffff;
}

/* 4.3 - Tab content */
.sm-tab-content {
  display: none;
}
.sm-tab-content.active {
  display: block;
}

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

/* ========================================================
   5.0 - 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); }
}

/* ========================================================
   6.0 - GOOGLE MAPS BRANDING OVERRIDES
   ======================================================== */

/* 6.1 - Suppress Google 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;
}

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

/* 6.3 - 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;
}

/* 6.4 - 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;
}

/* 6.5 - Force Pegman (Street View) 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;
}

/* ========================================================
   7.0 - RESPONSIVE BREAKPOINTS
   ======================================================== */

/* 7.1 - 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;
  }
}

/* 7.2 - 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;
  }
}

/* 7.3 - Dynamic dropdown trigger when tabs overflow */
.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;
}