/* ==========================================================
   Pool Service Dashboard
   style.css (CLEAN LIGHT THEME + FIXED HEADER)
========================================================== */

/* ==========================================================
   THEME
========================================================== */

:root {

    --primary: #0b3d91;
    --primary-dark: #082c69;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;

    --background: #f4f6f9;

    --text: #111827;
    --muted: #6b7280;

    --border: #d1d5db;

}

/* ==========================================================
   BASE
========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: Arial, Helvetica, sans-serif;

    background: var(--background);

    color: var(--text);

}

/* ==========================================================
   HEADER (FIXED - GUARANTEED WHITE TEXT)
========================================================== */

.app-header {

    background: var(--primary) !important;

    padding: 18px 20px;

    text-align: center;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

}

/* FORCE TITLE WHITE NO MATTER WHAT */
.app-header h1 {

    color: #ffffff !important;

    font-size: 28px;

    font-weight: 700;

    margin: 0;

    letter-spacing: 0.5px;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h2 {
    color: var(--text);
}

h3 {
    color: var(--text);
}

p {
    color: var(--muted);
}

/* ==========================================================
   BUTTONS
========================================================== */

button {

    cursor: pointer;

    border: none;

    padding: 10px 14px;

    border-radius: 8px;

    font-weight: 600;

    transition: 0.2s;

}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: #F4C542; /* yellow */
    color: white;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-neutral {
    background-color: #6c757d;
    color: white;
    border: none;
}

.btn-neutral:hover {
    background-color: #5a6268;
}

.btn-map {

    background:#FFD54F;
    color:#000;
    border:1px solid #D4A600;

}

.btn-map:hover {

    background:#FFC107;

}

/* ==========================================================
   CLEAR BUTTON
========================================================== */

.btn-clear {

    background: #6c757d;

    color: white;

}

.btn-clear:hover {

    background: #5c636a;

}

/* ==========================================================
   FORMS
========================================================== */

input,
select,
textarea {

    width: 100%;

    padding: 10px;

    border-radius: 8px;

    border: 1px solid var(--border);

    background: white;

    color: var(--text);

}

input:focus,
select:focus,
textarea:focus {

    outline: none;

    border-color: var(--primary);

}

/* ==========================================================
   CARDS
========================================================== */

.card{
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    margin-bottom:20px;
}

.field-row {
  display: flex;
  gap: 12px;
  width: 100%;
}


/* ==========================================================
   UTILITIES
========================================================== */

.hidden {
    display: none !important;
}