/* =============================================================================
   FATI IM Pagat — Django Admin · "Liquid Glass" premium theme
   -----------------------------------------------------------------------------
   FIX KRITIK I KONTRASTIT:
   Versioni i mëparshëm detyronte sfond të çelët por NUK caktonte ngjyrën e
   tekstit (--body-fg). Në dark mode të OS-it, Django vendoste tekst të çelët
   → tekst i çelët mbi sfond të çelët → pa kontrast.
   Kjo temë cakton paletën E PLOTË (sfond + tekst) dhe e RI-deklaron brenda
   media-query-t dark — pra pamja është e njëjtë dhe e lexueshme pavarësisht
   nga preferenca light/dark e sistemit operativ.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. PALETË E PLOTË — kontrast WCAG AA, e detyruar
   --------------------------------------------------------------------------- */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  /* Brand teal */
  --primary: #0f766e;
  --secondary: #0a554f;
  --accent: #14b8a6;
  --primary-fg: #ffffff;

  /* Teksti — i errët, kontrast i lartë mbi xhamin e çelët */
  --body-fg: #12302c;            /* tekst kryesor  ~13:1 */
  --body-quiet-color: #44605b;   /* tekst i qetë   ~6:1  */
  --body-loud-color: #06201c;    /* tekst i theksuar     */
  --body-bg: #eef4f3;

  /* Lidhjet */
  --link-fg: #0c6b63;
  --link-hover-color: #0a554f;
  --link-selected-fg: #0a554f;

  /* Header */
  --header-bg: linear-gradient(135deg, #0a554f 0%, #0f766e 100%);
  --header-color: #ffffff;
  --header-link-color: #ffffff;
  --header-branding-color: #ffffff;

  /* Breadcrumbs */
  --breadcrumbs-fg: #0a4a44;
  --breadcrumbs-link-fg: #0a554f;
  --breadcrumbs-bg: rgba(255, 255, 255, 0.55);

  /* Butona */
  --button-bg: #0f766e;
  --button-fg: #ffffff;
  --button-hover-bg: #0a554f;
  --default-button-bg: #0a554f;
  --default-button-hover-bg: #083f3a;
  --close-button-bg: #64748b;
  --close-button-hover-bg: #475569;
  --delete-button-bg: #b91c1c;
  --delete-button-hover-bg: #991b1b;

  /* Përzgjedhje + theksime */
  --selected-bg: #cdeae6;
  --selected-row: #ddf1ee;

  /* Object tools */
  --object-tools-fg: #ffffff;
  --object-tools-bg: #0f766e;
  --object-tools-hover-bg: #0a554f;

  /* Mesazhe */
  --message-success-bg: #d8f3e6;
  --message-warning-bg: #fdecc8;
  --message-error-bg: #fadcdc;

  /* Vija + kufij */
  --hairline-color: rgba(15, 60, 55, 0.14);
  --border-color: rgba(15, 60, 55, 0.16);

  --success-fg: #047857;
  --error-fg: #b91c1c;

  /* Sfonde dytësore */
  --darkened-bg: rgba(255, 255, 255, 0.45);
  --selected-bg-quiet: #e4f1ef;
}

/* Ri-deklarim brenda dark mode — që OS-i të mos fusë ngjyra që prishin
   kontrastin. Pamja mbetet e njëjtë, e lexueshme. */
@media (prefers-color-scheme: dark) {
  :root {
    --body-fg: #12302c;
    --body-quiet-color: #44605b;
    --body-loud-color: #06201c;
    --body-bg: #eef4f3;
    --link-fg: #0c6b63;
    --link-hover-color: #0a554f;
    --breadcrumbs-fg: #0a4a44;
    --hairline-color: rgba(15, 60, 55, 0.14);
    --border-color: rgba(15, 60, 55, 0.16);
    --darkened-bg: rgba(255, 255, 255, 0.45);
    color-scheme: light;
  }
}

/* ---------------------------------------------------------------------------
   2. SFONDI — gradient "liquid" me blob-e të buta për thellësi
   --------------------------------------------------------------------------- */
html, body {
  background: #e8f1ef;
}
body {
  color: var(--body-fg);
  background:
    linear-gradient(165deg, #ecf4f2 0%, #e3edef 45%, #e9f2ee 100%) fixed;
  -webkit-font-smoothing: antialiased;
}
/* Blob-e radiale të buta — japin "liquid depth" pas xhamit */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px circle at 12% 18%, rgba(20, 184, 166, 0.18), transparent 60%),
    radial-gradient(520px circle at 88% 12%, rgba(15, 118, 110, 0.15), transparent 60%),
    radial-gradient(480px circle at 78% 92%, rgba(94, 234, 212, 0.18), transparent 62%);
}

/* ---------------------------------------------------------------------------
   3. HEADER — xham teal
   --------------------------------------------------------------------------- */
#header {
  background: linear-gradient(135deg, #0a554f 0%, #0f766e 60%, #117f76 100%) !important;
  color: #fff;
  box-shadow: 0 4px 24px rgba(8, 50, 46, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#branding h1, #site-name, #site-name a { color: #fff !important; }

/* Branding mark + text */
#site-name { margin: 0; display: flex; align-items: center; gap: 12px; }
#site-name a {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none !important; color: #fff !important; font-weight: 700;
}
.admin-brand-mark {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  font-size: 22px; font-weight: 800; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.admin-brand-text { font-size: 18px; letter-spacing: 0.4px;
  display: inline-flex; align-items: baseline; gap: 6px; }
.admin-brand-text small {
  font-size: 11px; font-weight: 500; opacity: 0.9;
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 9px; border-radius: 999px; letter-spacing: 0.6px;
}

/* User tools */
#user-tools { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.9); }
#user-tools a {
  border-bottom: none !important;
  padding: 5px 11px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  margin-left: 8px; color: #fff !important;
  transition: background 0.15s, transform 0.15s;
}
#user-tools a:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }

/* ---------------------------------------------------------------------------
   4. BREADCRUMBS — shirit xhami
   --------------------------------------------------------------------------- */
div.breadcrumbs {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--breadcrumbs-fg);
  border-bottom: 1px solid rgba(15, 60, 55, 0.10);
  padding: 11px 40px; font-size: 13px; font-weight: 500;
}
div.breadcrumbs a { color: #0a554f; font-weight: 600; }
div.breadcrumbs a:hover { color: #0f766e; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   5. MODULE / PANELE — glassmorphism
   --------------------------------------------------------------------------- */
.module,
#content-main .module,
fieldset.module,
.dashboard .module,
#changelist,
#changelist-form,
.submit-row,
.inline-group,
#content-related .module {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px !important;
  box-shadow:
    0 10px 36px rgba(12, 55, 50, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  overflow: hidden;
}
.module { margin-bottom: 22px; }

/* Titujt e moduleve — gradient teal */
.module h2, .module caption, .inline-group h2,
.module h3, fieldset.module > h2 {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important;
  color: #ffffff !important;
  font-weight: 600; letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  border: none;
}

/* Përmbajtja — siguro tekst të errët kudo */
#content, #content-main, .module, .form-row, .help, p, td, th, label,
.dashboard #content, .aligned label {
  color: var(--body-fg);
}
.help, .helptext, .form-row .help, div.help, .aligned p.help {
  color: var(--body-quiet-color) !important;
}
a:link, a:visited { color: var(--link-fg); }
a:hover { color: var(--link-hover-color); }

/* ---------------------------------------------------------------------------
   6. TABELAT (changelist) — të lexueshme
   --------------------------------------------------------------------------- */
#changelist table { background: transparent; }
#changelist table thead th {
  background: rgba(214, 235, 232, 0.95);
  border-bottom: 2px solid #5eead4;
  color: #08433d;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; font-size: 11px;
}
#changelist table thead th a { color: #08433d; }
#changelist table tbody tr td,
#changelist table tbody tr th {
  color: var(--body-fg);
  border-bottom: 1px solid rgba(15, 60, 55, 0.08);
  background: rgba(255, 255, 255, 0.35);
}
#changelist table tbody tr:nth-child(even) td,
#changelist table tbody tr:nth-child(even) th {
  background: rgba(255, 255, 255, 0.55);
}
#changelist table tbody tr:hover td,
#changelist table tbody tr:hover th {
  background: rgba(205, 234, 230, 0.85) !important;
}
#changelist table tbody tr.selected td {
  background: var(--selected-bg) !important;
}
#changelist table tbody tr td a { color: var(--link-fg); font-weight: 600; }

/* Toolbar e kërkimit + filtra */
#toolbar {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px; padding: 10px 12px;
}
#toolbar input[type=text], #changelist-search input[type=text] {
  background: rgba(255, 255, 255, 0.92); color: var(--body-fg);
}
#changelist-filter {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
}
#changelist-filter h2 {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #fff; border-radius: 13px 13px 0 0;
}
#changelist-filter h3 { color: var(--body-loud-color); font-weight: 700; }
#changelist-filter li a { color: var(--body-quiet-color); }
#changelist-filter li.selected a { color: #0a554f; font-weight: 700; }
#changelist-filter a:hover, #changelist-filter a:focus { color: #0f766e; }

/* ---------------------------------------------------------------------------
   7. FORMAT — input-e xhami, kontrast i fortë
   --------------------------------------------------------------------------- */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], input[type=tel], input[type=search], input[type=date],
input[type=time], input[type=datetime-local], textarea, select,
.vTextField, .vDateField, .vTimeField {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--body-fg) !important;
  border: 1.5px solid rgba(15, 118, 110, 0.28) !important;
  border-radius: 9px !important;
  padding: 8px 11px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
input::placeholder, textarea::placeholder { color: #8aa39e; }
input:focus, textarea:focus, select:focus {
  border-color: #0f766e !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.16) !important;
  outline: none !important;
}
.form-row { border-bottom: 1px solid rgba(15, 60, 55, 0.08); }
fieldset .form-row label, .aligned label { color: var(--body-loud-color); font-weight: 600; }
.errornote, .errorlist {
  background: var(--message-error-bg); color: #7f1d1d;
  border-radius: 8px; border: 1px solid rgba(185, 28, 28, 0.3);
}

/* ---------------------------------------------------------------------------
   8. BUTONA — premium
   --------------------------------------------------------------------------- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  background: linear-gradient(135deg, #0f766e, #0a554f) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600; border: none !important;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover,
.submit-row input:hover, a.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 20px rgba(15, 118, 110, 0.38);
  filter: brightness(1.06);
}
.button.default, input[type=submit].default {
  background: linear-gradient(135deg, #14b8a6, #0f766e) !important;
}
.button.cancel-link, .deletelink, a.deletelink {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #fff !important;
}
.submit-row { display: flex; gap: 10px; align-items: center; }

/* Object tools (Add / History) */
.object-tools a {
  background: linear-gradient(135deg, #14b8a6, #0f766e) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 11px; text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.6px;
  box-shadow: 0 5px 14px rgba(20, 184, 166, 0.30);
  transition: transform 0.15s, box-shadow 0.15s;
}
.object-tools a:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(20, 184, 166, 0.42);
}

/* ---------------------------------------------------------------------------
   9. SIDEBAR (Django 4.0+)
   --------------------------------------------------------------------------- */
#nav-sidebar {
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
}
#nav-sidebar .module th, #nav-sidebar caption { color: var(--body-loud-color); }
#nav-sidebar .module a, #nav-sidebar a { color: #1d3a36; }
#nav-sidebar .module a:hover {
  background: rgba(205, 234, 230, 0.8); color: #0a554f;
}
#nav-sidebar .current-app .section a,
#nav-sidebar .current-model a {
  background: var(--selected-bg) !important;
  color: #0a554f !important; font-weight: 700;
}
.toggle-nav-sidebar { background: rgba(255,255,255,0.6); color: #0f766e; }

/* ---------------------------------------------------------------------------
   10. MESAZHE
   --------------------------------------------------------------------------- */
ul.messagelist li {
  border-radius: 10px; font-weight: 500;
  box-shadow: 0 3px 12px rgba(12, 55, 50, 0.10);
}
ul.messagelist li.success {
  background: var(--message-success-bg); color: #064e3b;
  border-left: 4px solid #10b981;
}
ul.messagelist li.warning {
  background: var(--message-warning-bg); color: #78350f;
  border-left: 4px solid #f59e0b;
}
ul.messagelist li.error {
  background: var(--message-error-bg); color: #7f1d1d;
  border-left: 4px solid #dc2626;
}

/* ---------------------------------------------------------------------------
   11. PAGINATION
   --------------------------------------------------------------------------- */
.paginator { color: var(--body-quiet-color); }
.paginator a:link, .paginator a:visited {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-radius: 8px; padding: 5px 11px; color: #0f766e; font-weight: 600;
}
.paginator a:hover { background: #d6ebe8; border-color: #0f766e; }
.paginator .this-page {
  background: linear-gradient(135deg, #0f766e, #0a554f);
  color: #fff; border-radius: 8px; padding: 5px 11px; font-weight: 700;
}

/* ---------------------------------------------------------------------------
   12. LOGIN PAGE — kontrast i fortë + fusha të mëdha
   --------------------------------------------------------------------------- */
/* Sfond teal i thellë → kontrast i qartë me kartën e bardhë sipër */
body.login {
  background: linear-gradient(135deg, #073631 0%, #0a554f 48%, #0f766e 100%) !important;
}
/* Kartë SOLIDE e bardhë (jo më xham gjysmë-transparent) → teksti del qartë */
.login #container {
  background: #ffffff !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(15, 118, 110, 0.18) !important;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(3, 28, 25, 0.50);
  width: 430px !important;
  max-width: 92vw;
  padding-bottom: 10px;
}
.login #header {
  background: transparent !important; box-shadow: none;
  text-align: center; padding: 28px 24px 4px !important;
}
.login #site-name { justify-content: center; }
/* Branding i LEXUESHËM mbi kartën e bardhë (më parë: tekst i bardhë mbi të bardhë) */
.login #site-name a,
.login .admin-brand-text { color: #0a4a44 !important; }
.login .admin-brand-text small { background: #0f766e; color: #fff !important; opacity: 1; }
.login .admin-brand-mark {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  border-color: rgba(15, 118, 110, 0.30); color: #fff;
}

/* Trupi i formës */
.login #content { color: var(--body-fg); padding: 6px 28px 4px; }
.login .form-row { border: none; padding: 10px 0; }
.login .form-row label {
  color: #06201c !important; font-weight: 700; font-size: 14px;
  display: block; margin-bottom: 6px;
}
/* FUSHAT — të mëdha, të gjera dhe me kontrast të lartë */
.login input[type=text],
.login input[type=password] {
  width: 100% !important; box-sizing: border-box !important;
  font-size: 16px !important;
  padding: 13px 15px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(15, 118, 110, 0.38) !important;
  background: #ffffff !important; color: #06201c !important;
}
.login input[type=text]:focus,
.login input[type=password]:focus {
  border-color: #0f766e !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18) !important;
}
/* BUTONI — i plotë dhe i madh */
.login .submit-row {
  background: transparent; border: none; box-shadow: none;
  padding: 8px 28px 24px; margin: 0;
}
.login .submit-row input[type=submit] {
  width: 100%; padding: 13px 18px !important;
  font-size: 16px !important; border-radius: 12px !important;
}
.login .password-reset-link { text-align: center; padding: 0 0 18px; }
.login .password-reset-link a { color: #0c6b63; font-weight: 600; }
.login .errornote, .login .errorlist { font-size: 14px; }

/* ---------------------------------------------------------------------------
   13. RREGULLIME TË PËRGJITHSHME — kontrast & finesë
   --------------------------------------------------------------------------- */
#content h1, h1, h2.subtitle, .colMS h1 { color: var(--body-loud-color); }
.dashboard #content { color: var(--body-fg); }
table caption a.section { color: #fff; }
.selector-chosen h2, .selector-available h2 {
  background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #fff;
}
.calendar caption, .calendarbox h2 { background: #0f766e !important; color: #fff; }
.calendar td a:hover, .timelist a:hover { background: #0f766e; color: #fff; }
fieldset.collapsed .collapse-toggle { color: #0f766e; }
.results { border-radius: 14px; overflow: hidden; }