/* :root {
  color-scheme: light;
  --bg: #f4f7f9;
  --ink: #16212d;
  --muted: #5f6f7d;
  --line: #d8e1e8;
  --panel: #ffffff;
  --accent: #17685d;
  --accent-dark: #104d45;
  --notice: #fff8df;
  --notice-line: #ead48c;
  --danger: #b42318;
  --focus: #f2b84b;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
} */

/* .shell {
  width: min(980px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  align-items: center;
  gap: 34px;
}

.brand-panel {
  padding: 48px 0;
}
.brand-mark img {
  width: 50px;
  height: 50px;
  object-fit: contain; 
}*/

/* .brand-mark {
  width: 60px;
  height: 52px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: white;
  font-size: 22px;
  font-weight: 800;
} */

/* h1 {
  margin: 28px 0 12px;
  font-size: 54px;
  line-height: 1;
  letter-spacing: 0;
}

p {
  margin: 0;
}

.brand-panel p {
  max-width: 560px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.auth-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 22px 60px rgba(22, 33, 45, 0.12);
}

.field {
  margin-bottom: 18px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #2f3f4f;
  font-size: 14px;
  font-weight: 700;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--ink);
  background: white;
  font: inherit;
}

input:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.error {
  min-height: 18px;
  display: block;
  margin-top: 6px;
  color: var(--danger);
  font-size: 13px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 22px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.4;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.submit {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.submit:hover:not(:disabled) {
  background: var(--accent-dark);
}

.submit:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.status {
  min-height: 22px;
  margin-top: 16px;
  color: var(--accent-dark);
  font-weight: 700;
  text-align: center;
}

.admin-shell {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0;
}

.admin-shell h1 {
  font-size: 40px;
}

.admin-shell p {
  color: var(--muted);
  line-height: 1.5;
}

.admin-bar {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
  align-items: end;
  margin: 24px 0;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
}

th {
  background: #eef3f7;
  color: #2f3f4f;
} */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background: #f5f7fb;
  color: #111827;
}

body {
  min-height: 100vh;
}

.admin-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 55px 0;
}

.admin-shell > h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.7px;
}

.admin-shell > p {
  margin: 10px 0 32px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================
   ADMIN CONTROLS
========================= */

.admin-bar {
  width: 100%;
  padding: 20px;

  display: flex;
  align-items: flex-end;
  gap: 14px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 25px rgba(0, 0, 0, 0.04);
}

.field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.3px;
}

.field input {
  width: 100%;
  height: 48px;

  padding: 0 15px;

  border: 1px solid #d1d5db;
  border-radius: 11px;

  background: #f9fafb;
  color: #111827;

  font-size: 14px;
  outline: none;

  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}

.field input::placeholder {
  color: #9ca3af;
}

.field input:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

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

.submit {
  height: 48px;

  padding: 0 25px;

  border: none;
  border-radius: 11px;

  background: #111827;
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.submit:hover {
  background: #1f2937;
}

.submit:active {
  transform: scale(0.98);
}

.submit:disabled {
  opacity: 0.55;
  cursor: default;
}

/* =========================
   STATUS
========================= */

.status {
  min-height: 20px;

  margin: 18px 3px;

  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

/* =========================
   TABLE
========================= */

.table-wrap {
  width: 100%;
  overflow-x: auto;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 18px;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 25px rgba(0, 0, 0, 0.04);
}

table {
  width: 100%;
  min-width: 950px;

  border-collapse: collapse;
  border-spacing: 0;

  font-size: 13px;
}

thead {
  background: #f9fafb;
}

th {
  padding: 15px 18px;

  text-align: left;

  color: #6b7280;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.6px;

  border-bottom: 1px solid #e5e7eb;
}

td {
  padding: 16px 18px;

  color: #374151;
  vertical-align: middle;

  border-bottom: 1px solid #f0f2f5;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: background 0.15s ease;
}

tbody tr:hover {
  background: #f9fafb;
}

/* username/test ID */
td:nth-child(2) {
  font-weight: 650;
  color: #111827;
}

/* password */
td:nth-child(3) {
  font-family: Consolas, "Courier New", monospace;
}

/* IP hash */
td:nth-child(5) {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #6b7280;
}

/* User agent */
td:nth-child(6) {
  max-width: 330px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   DARK MODE
========================= */

@media (prefers-color-scheme: dark) {
  html,
  body {
    background: #09090b;
    color: #f9fafb;
  }

  .admin-shell > p {
    color: #9ca3af;
  }

  .admin-bar,
  .table-wrap {
    background: #111113;
    border-color: #27272a;

    box-shadow: none;
  }

  .field label {
    color: #d1d5db;
  }

  .field input {
    background: #18181b;
    border-color: #3f3f46;
    color: #f9fafb;
  }

  .field input:focus {
    background: #18181b;
    border-color: #60a5fa;
  }

  .submit {
    background: #f9fafb;
    color: #111827;
  }

  .submit:hover {
    background: #e5e7eb;
  }

  thead {
    background: #18181b;
  }

  th {
    color: #a1a1aa;
    border-bottom-color: #27272a;
  }

  td {
    color: #d4d4d8;
    border-bottom-color: #27272a;
  }

  tbody tr:hover {
    background: #18181b;
  }

  td:nth-child(2) {
    color: #ffffff;
  }

  td:nth-child(5),
  td:nth-child(6) {
    color: #a1a1aa;
  }

  .status {
    color: #a1a1aa;
  }
}

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

@media (max-width: 700px) {
  .admin-shell {
    width: calc(100% - 28px);
    padding: 30px 0;
  }

  .admin-shell > h1 {
    font-size: 26px;
  }

  .admin-bar {
    flex-direction: column;
    align-items: stretch;

    padding: 16px;
    border-radius: 15px;
  }

  .submit {
    width: 100%;
  }

  .table-wrap {
    border-radius: 15px;
  }

  th,
  td {
    padding: 14px;
  }
}
/* Stilizimi aplikohet vetem ne telefona */
@media (max-width: 820px) {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
  }

  body {
    min-height: 100vh;
  }

  .shell {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 24px 20px;
  }

  /* English (US) */
  .brand-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .language {
    margin: 0;
    margin-bottom: 55px;
    font-size: 13px;
    color: #737373;
    text-align: center;
  }

  /* Logo */
  .brand-mark {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 55px;
  }

  .brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* .brand-mark img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  } */

  /* Login section */
  .auth-panel {
    width: 100%;
    max-width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #authForm {
    width: 100%;
  }

  /* .field {
    width: 100%;
    margin-bottom: 12px;
  }

  .field label {
    display: block;
    font-size: 13px;
    color: #737373;
    margin-bottom: 6px;
  }

  .field input {
    width: 100%;
    height: 52px;
    border: 1px solid #dbdbdb;
    border-radius: 12px;
    background: #fafafa;
    padding: 0 15px;
    font-size: 15px;
    outline: none;
  }

  .field input:focus {
    border-color: #8e8e8e;
    background: white;
  }

  .error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #d93025;
  } */
  .field {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
  }

  .field input {
    width: 100%;
    height: 54px;

    border: 1px solid #dbdbdb;
    border-radius: 12px;

    background: #fafafa;

    padding: 20px 15px 7px 15px;

    font-size: 15px;
    outline: none;
  }

  .field label {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 14px;
    color: #737373;

    pointer-events: none;

    transition: all 0.15s ease;
  }

  /* Kur klikon ne input */
  .field input:focus + label,

/* Kur ka tekst brenda inputit */
.field input:not(:placeholder-shown) + label {
    top: 8px;
    transform: translateY(0);

    font-size: 10px;
  }

  /* Input kur eshte aktiv */
  .field input:focus {
    border-color: #8e8e8e;
    background: #ffffff;
  }

  .error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #d93025;
  }

  /* Login button */
  .submit {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    border: none;
    border-radius: 24px;
    background: #1a74e3;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .submit:hover {
    background: #1a74e3;
    color: white;
  }

  .submit:active {
    background: #1a74e3;
    color: white;
  }

  .submit:focus {
    background: #1a74e3;
    color: white;
    outline: none;
  }

  .submit:disabled {
    background: #1a74e3;
    color: white;
    opacity: 0.5;
  }

  /* Forgot password */
  .forgot-password {
    margin-top: 20px;
    font-size: 14px;
    text-decoration: none;
    color: black;
    font-weight: 500;
  }

  /* Hapesire me e madhe para Create Account */
  .create-account {
    width: 100%;
    height: 48px;
    margin-top: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #0095f6;
    border-radius: 24px;

    color: #0095f6;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;

    background: transparent;
  }

  .status {
    text-align: center;
    font-size: 13px;
  }

  /* Footer gjithmone poshte */

  .footer {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .meta-brand {
    display: flex;
    align-items: center;
    gap: 6px;

    color: black;
    font-size: 13px;
  }

  .meta-brand i {
    font-size: 22px;
  }
  /* LIGHT MODE */
  @media (prefers-color-scheme: light) {
    body,
    .shell {
      background: #ffffff;
    }

    .forgot-password,
    .meta-brand {
      color: #000000;
    }
    .meta-brand i {
      color: #1a74e3;
    }

    .field input {
      color: #000000;
      background: #fafafa;
    }
  }

  /* DARK MODE */
  @media (prefers-color-scheme: dark) {
    body,
    .shell {
      background: #000000;
    }

    .forgot-password,
    .meta-brand {
      color: #ffffff;
    }

    .field input {
      color: #ffffff;
      background: #121212;
      border-color: #363636;
    }

    .field input:focus {
      background: #121212;
      border-color: #737373;
    }
  }
}