/* common.css 
   ------------------------------------------------
   This file adds a polished, consistent look to 
   your main pages (index, upload, analysis, etc.).
   It will NOT override your grid/card code in 
   "styles.css" that you like. 
   ------------------------------------------------ */

/* Reset some default margins/paddings */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: #f8fafc;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: #333; /* Slightly darker for better readability */
  font-size: 14px; /* Reduced from default 16px for compactness */
}

/* A container to center content on wide screens */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem; /* Reduced padding */
}

/* A top header bar (like a navbar) for brand or page title */
.header {
  background: #2A77BB; /* deep blue */
  color: #fff;
  padding: 0.5rem; /* Reduced padding */
  margin-bottom: 0.5rem; /* Reduced margin */
}
.header h1 {
  margin: 0;
  font-size: 1.5rem; /* Slightly smaller for compactness */
}

/* “Hero” or subheader style if needed (optional) */
.subheader {
  background: #3c8dde; 
  color: #fff;
  padding: 0.5rem; /* Reduced padding */
  margin-bottom: 0.5rem;
  border-radius: 6px; /* Slightly smaller radius */
}
.subheader h2 {
  margin: 0;
  font-size: 1.2rem; /* Smaller subheader */
}

/* Headings styles */
h1, h2, h3, h4, h5 {
  margin-bottom: 0.3rem; /* Reduced spacing */
  font-weight: 600;
}
h3 {
  font-size: 16px; /* Reduced for card headers */
}
h4 {
  font-size: 15px; /* Used for card headers, aligns with reference app */
}
h5 {
  font-size: 14px; /* For smaller headers, like in Notes History */
}

/* Simple card-like containers */
.card-simple {
  background: #f9f9f9; /* Softer background */
  border: 1px solid #e0e0e0; /* Lighter border */
  border-radius: 6px; /* Smaller radius */
  padding: 0.5rem; /* Reduced padding */
  margin-bottom: 0.5rem; /* Reduced margin */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Lighter shadow */
}

/* Buttons */
.btn {
  display: inline-block;
  font-size: 12px; /* Smaller font size */
  padding: 0.25rem 0.5rem; /* Reduced padding */
  margin: 0.1rem; /* Reduced margin */
  border: 1px solid #2A77BB;
  border-radius: 3px; /* Smaller radius */
  background: #ffffff;
  color: #2A77BB;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn:hover {
  background: #2A77BB;
  color: #fff;
}
.btn-primary {
  background: #2A77BB;
  color: #fff;
  border: 1px solid #2A77BB;
}
.btn-primary:hover {
  background: #1e63a0;
  border-color: #1e63a0;
}
.btn-sm {
  font-size: 12px; /* Ensure small buttons are consistent */
  padding: 0.2rem 0.4rem; /* Even smaller padding for btn-sm */
}

/* Danger button style, e.g. for “Clear Database” */
.btn-danger {
  background: #dc3545;
  color: #fff;
  border: 1px solid #dc3545;
}
.btn-danger:hover {
  background: #b52a35;
  border-color: #b52a35;
}

/* Success button style */
.btn-success {
  background: #28a745;
  color: #fff;
  border: 1px solid #28a745;
}
.btn-success:hover {
  background: #218838;
  border-color: #218838;
}

/* Progress bar styling */
.progress {
  height: 0.75rem; /* Smaller height to match reference app */
  border-radius: 3px;
}
.progress-bar {
  background-color: #4CAF50; /* Softer green */
}

/* Footer style example if you want a consistent bottom bar */
.footer {
  background: #eee;
  text-align: center;
  padding: 0.5rem; /* Reduced padding */
  margin-top: 1rem; /* Reduced margin */
  border-top: 1px solid #ccc;
}
.footer p {
  margin: 0.3rem 0; /* Reduced margin */
}

/* Form elements (inputs, selects) with a subtle look */
input[type="text"],
select,
textarea {
  font-size: 13px; /* Smaller font size */
  padding: 0.2rem 0.4rem; /* Reduced padding */
  border: 1px solid #ccc;
  border-radius: 3px; /* Smaller radius */
  margin-bottom: 0.3rem; /* Reduced margin */
}
input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #2A77BB;
  box-shadow: 0 0 3px rgba(42,119,187,0.3);
}
.form-control-sm {
  font-size: 13px; /* Ensure small inputs are consistent */
  padding: 0.2rem 0.4rem; /* Reduced padding */
}

/* Optional link styling */
a {
  color: #2A77BB;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Icons in headers */
.card-header i {
  margin-right: 0.3rem; /* Space between icon and text */
}

/* Notes section styling */
.notes-history {
  max-height: 100px; /* Limit height for scrolling */
  overflow-y: auto;
  padding: 0.3rem;
  border-top: 1px solid #e0e0e0;
  margin-top: 0.5rem;
}
.notes-history div {
  font-size: 12px; /* Smaller font for history entries */
  padding: 0.2rem 0;
}

/* Reduced margin-bottom classes */
.mb-1 {
  margin-bottom: 0.25rem !important; /* Tighter spacing */
}
.mb-2 {
  margin-bottom: 0.5rem !important; /* Adjusted for compactness */
}

/* Reduced gap for flex containers */
.gap-1 {
  gap: 0.25rem !important; /* Smaller gap */
}
.gap-2 {
  gap: 0.5rem !important; /* Adjusted for compactness */
}

/* Muted text for secondary info */
.text-muted {
  color: #6c757d !important; /* Bootstrap's muted color */
}

/* Summary counts and status filters */
.summary-counts {
  display: flex;
  gap: 10px; /* Reduced gap */
  margin-bottom: 10px;
  font-weight: bold;
}

.status-filters {
  margin-bottom: 10px; /* Reduced margin */
}

.status-toggle {
  display: block; /* Stack vertically */
  margin-bottom: 10px; /* Reduced spacing */
}

.status-toggle label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px; /* Reduced space between icon and text */
  font-size: 14px; /* Smaller text */
}

.status-toggle i {
  font-size: 20px; /* Slightly smaller icon */
  transition: opacity 0.2s ease;
  display: inline-block !important;
  visibility: visible !important;
  color: #fff; /* White for sidebar icons */
}

.status-toggle i:hover {
  opacity: 0.7;
}

/* Updated for Font Awesome 6 */
.fa-solid.fa-eye:hover,
.fa-solid.fa-eye-slash:hover {
  opacity: 0.7;
  cursor: pointer;
}

.orders-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px; /* Reduced margin */
}
.orders-table th, .orders-table td {
  padding: 8px; /* Reduced padding */
  border: 1px solid #ccc;
  text-align: left;
}
.orders-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.status-indicator {
  padding: 2px 6px; /* Smaller padding */
  border-radius: 3px;
  font-weight: bold;
}
/* Example color classes (adjust as needed) */
.status-indicator-needs-appointment { background-color: #2196F3; color: white; }
.status-indicator-report-in-progress { background-color: #4CAF50; color: white; }
.status-indicator-cancelled { background-color: #F44336; color: white; }
.status-indicator-on-hold { background-color: #9E9E9E; color: white; }
.status-indicator-open { background-color: #FF9800; color: white; }
.status-indicator-in-progress { background-color: #673AB7; color: white; }
.status-indicator-not-set { background-color: #BDBDBD; color: black; }

.overdue {
  color: red;
  font-weight: bold;
  margin-left: 5px;
}

/* Ensure table icons are visible */
.filter-eye i {
  display: inline-block !important;
  visibility: visible !important;
  color: #000; /* Black for table icons */
}

/* -------------------------------------------------- */
/* Fullscreen toggle styles (added for .full-screen-mode) */
body.full-screen-mode .navbar,
body.full-screen-mode nav.sidebar,
body.full-screen-mode #adjustmentHistoryPanel {
  display: none !important;
}

body.full-screen-mode .main-content {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}

body.full-screen-mode .container-fluid {
  padding: 0 !important;
}

/* -----------------------------------------
   MAIN PAGE & LAYOUT
-----------------------------------------*/
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  background-color: #f8fafc;
  margin: 0; 
  padding: 0;
}
h1 {
  margin: 0; 
  padding: 0;
  font-size: 1.6rem;
}

/* Sidebar layout adjustments */
nav.sidebar {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Hide elements with the hidden class */
.hidden {
  display: none;
}

/* The pinned subject container => same style as comp container, except pinned. */
.subject-pinned-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 320px; 
  margin-right: 24px; 
  padding-top: 16px; 
  background: transparent;
}

/* The right container => horizontal scroll of comp cards with snap */
.comp-scroll-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll; 
  scroll-snap-type: x mandatory;
  gap: 24px;
  padding: 16px;
  flex: 1;
}

/* visible scrollbar */
.comp-scroll-container::-webkit-scrollbar {
  height: 12px;
}
.comp-scroll-container::-webkit-scrollbar-track {
  background: #eee;
}
.comp-scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

/* The arrow buttons pinned near bottom center of the pinned-and-scroll container */
.scroll-arrow {
  position: absolute;
  bottom: -40px;        /* pinned near bottom */
  left: 50%;           /* anchor in the middle (50% from left) */
  z-index: 999;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #aaa;
  background: #f9f9f9;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The left arrow: shift it left from center by e.g. 60px */
.scroll-arrow.arrow-left {
  transform: translateX(-80px);
}

/* The right arrow: shift it right from center by e.g. 60px */
.scroll-arrow.arrow-right {
  transform: translateX(40px);
}

.scroll-arrow:hover {
  background: #e9e9e9;
}
.scroll-arrow i {
  pointer-events: none;
}

/* -----------------------------------------
   CARD STYLING (SUBJECT & COMPS)
-----------------------------------------*/
.card-subject,
.card-comp {
  scroll-snap-align: start;
  min-width: 300px;  
  min-height: 550px; 
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: relative;
  overflow-y: auto;
}

/* Subject => pastel green, Comps => pastel blue */
.card-subject {
  background: #c4ecd4; 
}
.card-comp {
  background: #e4f0fc;
}

/* TOP ROW => reorder arrows, lock icon, true comp checkbox */
.card-header-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.card-header-left {
  /* display: flex;
  align-items: center;
  gap: 10px; */
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 4px; /* a little gap before second line */
}
.card-header-left label {
  margin: 0;
  white-space: nowrap;
}
.card-header-right {
  display: flex;
  gap: 8px;

}
.arrow-btn, 
.lock-btn {
  cursor: pointer;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f9f9f9;
  transition: background 0.2s;
}
.arrow-btn:hover, 
.lock-btn:hover {
  background: #e9e9e9;
}

/* The field rows => 
   Single line with offset on the same line 
   We'll also ensure addresses never wrap => ellipsis */
.field-row {
  margin-bottom: 6px;
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
}
.field-left-part {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  padding-right: 8px;
}
.field-right-offset {
  flex: 0 0 auto;
  text-align: right;
  min-width: 60px;
  color: #333; 
}

/* net/gross/adjusted => separate from main fields with a top border */
.card-comp hr,
.card-subject hr {
  border: none;
  border-top: 1px solid #999;
  margin: 8px 0;
}
.card-footer-row p {
  margin: 2px 0;
}
/* Basic reset and fonts */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f9f9f9;
}

/* TOP NAV BAR */
.top-navbar {
    background-color: #2e3b4e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #fff;
}

.top-navbar .logo a {
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: bold;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 1rem;
}

.nav-menu li a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem;
    transition: background 0.2s;
}

.nav-menu li a:hover {
    background-color: #3d4b60;
    border-radius: 4px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
}

.search-input {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
}

.btn-add {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

.btn-add:hover {
    background: #0056b3;
}

.btn-reset {
    background: #eee;
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
    border-radius: 4px;
}

.btn-reset:hover {
    background: #ddd;
}

/* CONTENT CONTAINER */
.content-container {
    display: flex;
}

/* SIDEBAR */
.side-navbar {
    width: 240px;
    background-color: #fff;
    padding: 1rem;
    border-right: 1px solid #ddd;
    min-height: calc(100vh - 60px);
}

.side-navbar ul {
    list-style: none;
    padding: 0;
}

.side-navbar ul li {
    margin-bottom: 0.5rem;
}

.side-navbar ul li a {
    color: #333;
    text-decoration: none;
    padding: 0.5rem;
    display: block;
}

.side-navbar ul li a:hover {
    background-color: #f0f0f0;
    border-radius: 4px;
}

/* MAIN CONTENT */
.main-content {
    flex: 1;
    padding: 1rem;
}

/* SUMMARY ROW */
.summary-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
    min-width: 100px;
    text-align: center;
    flex: 1;
}

.summary-item .label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.summary-item .value {
    font-size: 1.2rem;
    font-weight: bold;
}

/* ORDERS TABLE */
.orders-table-container {
    margin-left: 240px;
    width: calc(100% - 240px);
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.orders-table th, .orders-table td {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 1px solid #ddd;
}

.orders-table thead {
    background: #f0f0f0;
    font-weight: bold;
}

.status-icon {
    margin-right: 0.5rem;
}

.status-icon.blue {
    color: #007bff;
}

.status-icon.red {
    color: #d9534f;
}

/* FOOTER */
.footer {
    text-align: center;
    padding: 1rem;
    background-color: #f0f0f0;
    margin-top: 1rem;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column;
    }
    .side-navbar, .orders-table-container {
        width: 100%;
        margin: 0;
    }
}

.flash-error {
    background: #f8d7da;
    color: #721c24;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 4px;
}

.btn {
    background: #007bff;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    margin-left: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
}

.btn:hover {
    background: #0056b3;
}
  
.upload-form, .mapping-form {
    margin-bottom: 1rem;
}

.mapping-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mapping-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.csv-label {
    font-weight: bold;
    min-width: 150px;
}

.mapping-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mapping-select, .rule-select {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
}

.rule-input {
    margin-left: 1rem;
    padding: 0.5rem;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.rule-help {
    cursor: help;
    margin-left: 0.5rem;
    color: #007bff;
}

.rule-help:hover {
    text-decoration: underline;
}

/* Ensure preview table matches orders table styling */
.orders-table th, .orders-table td {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 1px solid #ddd;
}

.orders-table thead {
    background: #f0f0f0;
    font-weight: bold;
}

.mls-input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
    margin-bottom: 1rem;
}

.mapping-source {
    margin-bottom: 1rem;
}

/* Hide ALL .status-spinner icons unless JS toggles them */
.status-spinner { 
  display: none !important;   /* !important beats FA’s rule */
}
.d-none { display: none !important; }

/* Hide ONLY the spinner icon inside the sidebar toggle */
.status-toggle .status-spinner {
  display: none !important;   /* beats .status-toggle i        */
  visibility: hidden !important;
}

/* Make the panel printable by itself */
@media print {
  /* Hide everything by default */
  body * { visibility: hidden !important; }

  /* Only show the history panel */
  #adjustmentHistoryPanel, #adjustmentHistoryPanel * {
    visibility: visible !important;
  }

  /* Let it take the full page width on print */
  #adjustmentHistoryPanel {
    position: absolute !important;
    left: 0; top: 0;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    border: none !important;
    padding: 0 10mm !important;
  }
}