@font-face {
  font-family: "Arnaud-Light";
  src:
    url("../font/Arnaud-Light.woff") format("woff"),
    url("../font/Arnaud-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Arnaud-Regular";
  src:
    url("../font/Arnaud-Regular.woff") format("woff"),
    url("../font/Arnaud-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Arnaud-Medium";
  src:
    url("../font/Arnaud-Medium.woff") format("woff"),
    url("../font/Arnaud-Medium.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Arnaud-Bold";
  src:
    url("../font/Arnaud-Bold.woff") format("woff"),
    url("../font/Arnaud-Bold.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

/* =======================================================================
   The following code is PUBLIC for use in all HTML and PHP files (OOP Style)
   This section contains reusable / shared CSS to prevent duplication.
   ======================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f5f6fa;
  overflow-x: hidden;
}

/* NAVBAR (common to all pages) */
.navbar {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.35s ease,
    background 0.3s ease;
}
.navbar a {
  text-decoration: none;
  padding: 8px 15px;
  color: #fff;
  border-radius: 6px;
  font-size: 1rem;
  transition: background 0.3s ease;
}
.navbar a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.navbar.navbar--hidden {
  transform: translateY(-100%);
}
.navbar.scrolled {
  background: rgba(0, 0, 0, 0.85);
}

/* ===== Tooltip ===== */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: default;
}

.tooltipText {
  position: absolute;
  bottom: 100%;
  left: 0%;
  transform: translateX(-0%);
  z-index: 20;

  opacity: 0;
  transition: opacity 0.2s ease;
  min-width: auto;
  padding: 6px 10px;

  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  text-align: center;
  font-size: smaller;

  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  white-space: nowrap;
  cursor: default;
}

/* Show tooltip on hover */
.tooltip:hover .tooltipText {
  opacity: 1;
}

/* Shared Page Content Wrapper */
.content {
  padding: 100px 20px;
}

.contentHeader h1 {
  margin: 0;
  font-family: "Arnaud-Regular", Arial, sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

a {
  text-decoration: none;
}

/* Headings */
h1,
h2,
h3,
h4 {
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}

h3 {
  border-bottom: 2px solid #003369;
  padding-bottom: 5px;
}

/* FORM BASE STYLE (shared) */
form {
  background: #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 25px;
  border-radius: 10px;
  width: 700px;
  margin: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input,
select,
textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* TABLE (shared) */
.table-wrapper {
  margin-top: 15px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 0.41rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

th,
td {
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* required css to make rounded table (below) */
tr:first-child th:first-child {
  border-top-left-radius: 5px;
}
tr:first-child th:last-child {
  border-top-right-radius: 5px;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* Buttons (shared) */
button,
.navbar a {
  cursor: pointer;
}

button {
  padding: 8px 12px;
  background: #000;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 15px;
  transition: 0.3s;
}

button:hover {
  background: #ffffff;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
button:active {
  scale: 0.95;
  transition: all 0.1s;
}

.items-section button[type="button"],
.action_btn_row {
  background: #1e7e34;
}

.items-section button[type="button"]:hover,
.action_btn_row:hover {
  background: #28a745;
}

.items-section button[onclick*="removeRow"],
.removeRowBtn {
  background: #91232e;
}

.items-section button[onclick*="removeRow"]:hover,
.removeRowBtn:hover {
  background: #dc3545;
}

/* Read-only input fields */
input[readonly] {
  background: #f1f1f1;
}

/* =======================================================================
   login.php
   ======================================================================= */
.login .checkbox {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 35px;
  margin-bottom: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.login .checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

.login .checkMark {
  position: absolute;
  border-radius: 2px;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  transition: all 2s cubic-bezier(0.075, 0.82, 0.111, 1);
}
.checkbox:hover input ~ .checkMark {
  background-color: hsla(37, 40%, 14%, 0.6);
}

.checkbox input:checked ~ .checkMark {
  background-color: hsla(36, 100%, 50%, 0.9);
}

.checkMark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox input:checked ~ .checkMark:after {
  display: block;
}

.checkbox .checkMark:after {
  left: 7px;
  top: 3px;
  width: 3px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* =========================
   LOGIN PAGE LAYOUT
========================= */

.login .content {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 90px 16px 24px;
  position: relative;
  left: 0;
  overflow-y: auto;
}

.login_header_wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.login .login_header {
  width: auto;
  max-width: 100%;
  text-decoration: none;
  font-size: 18px;
  white-space: nowrap;
  text-align: center;
  color: black;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: inline-block;
  font-family: "Arnaud-Regular";
}

.login form {
  width: min(700px, 100%);
  max-width: 100%;
}

.login form input,
.login form button {
  width: 100%;
  box-sizing: border-box;
}

.login .error {
  color: #dc3545;
  margin: 10px 0;
}

.login .success,
.login .notice {
  margin: 10px 0;
}

.login .success {
  color: #198754;
}

.login .notice {
  color: #7a5f24;
}

.login .auth_links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.login .auth_links a {
  color: #5a4724;
  text-decoration: none;
}

.login .auth_links a:hover {
  text-decoration: underline;
}

.login .auth_divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px;
  color: rgba(0, 0, 0, 0.58);
}

.login .auth_divider::before,
.login .auth_divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.14);
}

.login .social_auth {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.login .social_auth a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  color: #1f1f1f;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.login .social_auth a:hover {
  background: rgba(252, 188, 89, 0.12);
  border-color: rgba(252, 188, 89, 0.55);
}

.login .captcha_box,
.login .account_summary {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(252, 188, 89, 0.12);
}

.login .captcha_box p,
.login .account_summary p {
  margin: 0 0 10px;
}

.login h1 {
  margin-bottom: 14px;
  font-size: 28px;
}

@media (max-width: 600px) {
  .login .content {
    padding: 72px 14px 20px;
    align-items: start; /* better when keyboard opens */
  }

  .login .login_header {
    font-size: 16px;
  }

  .login form {
    width: 100%;
  }

  .login .auth_links {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   SHORT HEIGHT DEVICES
   (landscape phones etc.)
========================= */
@media (max-height: 700px) {
  .login .content {
    padding-top: 60px;
    align-items: start;
  }
}