/* base layout */
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f6f8;
  color: #1c1c1c;
}

main.content {
  padding: 40px 6%;
  min-height: calc(100vh - 200px);
}

/* navbar */
.navbar {
  background-color: #001f3f;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

.navbar img {
  height: 40px;
  vertical-align: middle;
  display: block;
}

.nav-right a {
  color: #fff;
  margin-left: 22px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav-right a:hover { opacity: 0.8; }

/* footer */
.footer {
  background-color: #001f3f;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  font-size: 14px;
  box-sizing: border-box;
}

.footer-left, .footer-right {
  flex: 1;
}

.footer-center {
  flex: 1;
  text-align: center;
}

.footer a {
  color: #9ecaff;
  text-decoration: none;
}
.footer a:hover { text-decoration: underline; }

.footer-left p, .footer-center p, .footer-right p {
  margin: 2px 0;
  font-size: 14px;
}

/* headings */
h1, h2, h3 {
  color: #0a3161;
  font-weight: 600;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

/* buttons */
.btn {
  padding: 7px 14px;
  border: 1px solid #0a66c2;
  background-color: #0a66c2;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s, transform 0.1s;
}

.btn:hover { background-color: #094f97; }

.btn.ghost {
  background: transparent;
  color: #0a66c2;
}

.btn.danger {
  background-color: #d93025;
  border-color: #d93025;
}

.btn.danger:hover { background-color: #b72b20; }

/* tables/cards */
.card-table {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 6px;
}

th, td {
  border: 1px solid #e5e5e5;
  padding: 8px 10px;
  text-align: left;
}

th {
  background-color: #f0f4f8;
  color: #1c1c1c;
}

/* breadcrumb */
.breadcrumb {
  margin-bottom: 16px;
  color: #555;
  font-size: 14px;
}

.breadcrumb .sep { margin: 0 6px; }

/* subtabs (admin) */
.subtabs {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid #e0e0e0;
  margin: 16px 0 20px;
}

.subtab {
  padding: 8px 14px;
  border: 1px solid #d1d1d1;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #f8f9fa;
  cursor: pointer;
  font-weight: 500;
}

.subtab.active {
  background: #fff;
  color: #0a3161;
  border-color: #c2c2c2;
}

/* modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden { display: none; }

.modal-dialog {
  width: min(500px, 90%);
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.modal-header, .modal-footer {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.modal-body { padding: 16px; }

.modal-footer {
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* forms */
.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-row label {
  font-size: 13px;
  color: #444;
  margin-bottom: 4px;
}

.form-row input, .form-row select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-row input:focus, .form-row select:focus {
  outline: none;
  border-color: #0a66c2;
  box-shadow: 0 0 0 2px rgba(10,102,194,0.2);
}

/* company dashboard layout */
.company-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* utility */
.hidden { display: none !important; }
.muted { color: #777; font-size: 12px; }

@media (max-width: 700px) {
  .nav-right a { margin-left: 12px; font-size: 14px; }
  main.content { padding: 24px 5%; }
  .footer { flex-direction: column; text-align: center; gap: 8px; padding: 20px 0; }
}

/* readings table with responsive fit (removes the need to scroll horizontally) */
#tbl {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  word-wrap: break-word;
}

#tbl th, #tbl td {
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  border: 1px solid #e0e0e0;
}

#tbl th {
  background-color: #f0f4f8;
  color: #0a3161;
  font-weight: 600;
  font-size: 13px;
}

#tbl td { color: #333; }

/* shrinks slightly for narrower screens */
@media (max-width: 1500px) {
  #tbl { font-size: 12px; }
  #tbl th, #tbl td { padding: 4px 6px; }
}

/* on small screens hides less critical columns for readability */
@media (max-width: 1200px) {
  #tbl th:nth-child(n+13),
  #tbl td:nth-child(n+13) {
    display: none;
  }
}

/* location dashboard layout */

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 24px;
    margin-top: 25px;
}

.meter-tile {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    border: 1px solid #e3e6ea;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.meter-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 22px rgba(0,0,0,0.12);
}

.tile-header {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0a3161;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dee3ea;
}

.tile-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.metric-value {
    font-size: 1rem;
    font-weight: 500;
    color: #111;
}

.metric-value-strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a3161;
}

.tile-meta-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.82rem;
}

.tile-meta-label {
    font-weight: 600;
    color: #666;
}

.tile-meta-value {
    color: #333;
}

.meter-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin-top: 4px;
}

.meter-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-box-row {
    display: flex;
    gap: 8px;
}

.metric-box-row-3 > .metric-box {
    flex: 1 1 0;
}

.metric-box {
    background: #f7f9fc;
    border-radius: 10px;
    border: 1px solid #dde3f0;
    padding: 6px 8px 9px;
    display: flex;
    flex-direction: column;
    min-height: 52px;
}

.metric-box-main {
    padding: 8px 10px 11px;
}

.metric-box-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid #dde3f0;
}

/* Value inside box */
.metric-box-value {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
}

.metric-section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-top: 4px;
    margin-bottom: 4px;
}

.metric-box-row-kva .metric-box {
    flex: 1 1 50%;
}

.metric-box-row-voltage {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.metric-box-row-voltage .metric-box {
    flex: 0 0 42%;
}

.tile-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e3e6ea;
}

.expand-btn {
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 6px;
    background: #0a66c2;
    color: #fff;
    border: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.expand-btn:hover {
    background: #094f97;
    transform: translateY(-1px);
}

.last-updated {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    padding: 8px 0;
}

.modal {
    background: rgba(0,0,0,0.4);
    animation: fadeInModal 0.2s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: #ffffff;
    width: min(1100px, 92%);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(40px); opacity: 0;}
    to { transform: translateY(0); opacity: 1; }
}

.modal-close {
    float: right;
    font-size: 26px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #000;
}

.back-button {
    display: inline-block;
    margin-top: 18px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 6px;
    background: #ececec;
    border: 1px solid #ccc;
    color: #333;
    cursor: pointer;
    transition: background 0.2s ease;
}

.back-button:hover {
    background: #ddd;
}

#chart-container {
    margin-top: 10px;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    min-height: 420px;
}

@media (max-width: 900px) {
    .meter-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .meter-tile {
        padding: 16px;
    }
    .tile-header {
        font-size: 1rem;
    }
    #chart-container {
        height: 340px !important;
    }
}


.chart-controls-panel {
    margin-top: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: #f7f9fc;
    border-radius: 10px;
    border: 1px solid #dde3f0;
}

.chart-controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.chart-controls-row:last-child {
    margin-bottom: 0;
}

.chart-controls-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0a3161;
    min-width: 90px;
}

.metric-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #333;
}

.metric-toggle input[type="checkbox"] {
    cursor: pointer;
    accent-color: #0a66c2;
}

.range-button {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 999px;
    border: 1px solid #c5d0e6;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.range-button:hover {
    background: #e9f1ff;
    border-color: #0a66c2;
}

.range-button.active {
    background: #0a66c2;
    color: #ffffff;
    border-color: #0a66c2;
}

@media (max-width: 700px) {
    .chart-controls-panel {
        padding: 8px 10px;
    }
    .chart-controls-label {
        min-width: 80px;
    }
}



/* Iteration 1 References:
ChatGPT was used to generate code that was adapted and used for the following parts of style.css:
- Navbar and footer layout, including flex-based structure and colour scheme.
- Modal dialogue styling (layout, positioning, shadow and border design).
- Responsive behaviour for smaller screens
- Readings table responsive fit

All generated code was manually reviewed, tested and refined to align with the overall design of the system.

ChatGPT was provided with screenshots of webpage mockups that were previously manually created for the high-level design
document and was prompted to 'Generate CSS that can be used to reproduce the overall layout, styling, and structure of the mockups'

 */

/* Iteration 2 References:
Due to the time constraint and focus on functionality rather than appearance, ChatGPT was used to generate CSS code for the file ‘style.css’.
ChatGPT was provided with the visual layout that had been created of the location dashboard and asked to produce CSS that matches that structure, appearance and spacing.
The generated code was reviewed and modified to integrate with the rest of the system and improve the look of the new dashboard.

 */