/* =========================
   BASE PAGE STYLING
========================= */

body {
    margin: 0;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    background: #eef2ec;
    color: #222;
}

/* =========================
   LAYOUT CONTAINER
========================= */

.container {
    width: 96%;
    /* max-width: 1800px; */
    margin: 0 auto;
}

.container-wide {
    width: 96%;
    max-width: 1800px;
    margin: 0 auto;
}

/* =========================
   HEADINGS
========================= */

h1, h2, h3 {
    color: #2f4f3a;
    margin-top: 0;
}

/* =========================
   REMOVE FORM CONFLICTS
   (IMPORTANT: no width rules here anymore)
========================= */

form {
    margin-bottom: 25px;
}

/* =========================
   TABLE STYLING (GLOBAL VIEW TABLES)
========================= */

table {
    width: 100%;
    border-collapse: collapse;
      /*  max-width: 1200px; */
    background: #ffffff;
    border: 1px solid #777;
    margin-top: 20px;
}

th, td {
    border: 1px solid #777;
    padding: 8px 10px;
}

th {
    background: #dce6dc;
    color: #2f4f3a;
    text-align: left;
}

/* zebra striping */
tbody tr:nth-child(even) {
    background: #f7f9f7;
}

tbody tr:hover {
    background: #e7f0e7;
}

/* =========================
   BUTTONS (GLOBAL DEFAULTS)
========================= */

button,
input[type="submit"] {
    background: #3d6b47;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 6px;
    padding: 10px 14px;
}

button:hover,
input[type="submit"]:hover {
    background: #315639;
}

/* =========================
   SMALL UI HELPERS
========================= */

.notice {
    background: #dff0d8;
    color: #2f5c2f;
    border: 1px solid #b7d7b0;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 6px;
}

/* =======================
   MOBILE
========================= */

@media (max-width: 768px) {

    body {
        padding: 10px;
    }

    th, td {
        font-size: 14px;
        padding: 6px;
    }

}


/* table sizing */
/* =========================
   RECENT SIGHTINGS TABLE FONT
========================= */

.recent-sightings-table {
    font-size: 13px;
}

.recent-sightings-table th {
    font-size: 13px;
}
.recent-sightings-table td {
    font-size: 11px;
}

/* =========================
   GENERIC DATA TABLE STYLE
========================= */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    /* max-width: 1400px; */
    font-size: 13px;
}

.data-table th,
.data-table td {
    border: 1px solid #777;
    padding: 6px 8px;
    font-size: 13px;
}

.data-table th {
    background: #dce6dc;
    color: #2f4f3a;
    text-align: left;
}

.data-table tbody tr:nth-child(even) {
    background: #f7f9f7;
}

.data-table tbody tr:hover {
    background: #e7f0e7;
}

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 45px;
    height: 45px;
    background: #3d6b47;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 20px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: background 0.2s ease, transform 0.2s ease;
}

.back-to-top:hover {
    background: #315639;
    transform: translateY(-2px);
}