/* =========================================================
   MATURANTET.COM — PREMIUM UI CSS
   (Replace your whole CSS file with this)
========================================================= */

/* ===========================
   THEME TOKENS
=========================== */
:root{
  --bg1:#eef2ff;
  --bg2:#f8f9ff;

  --brand:#673DE6;
  --brand2:#8E2DE2;

  --text:#1f2330;
  --muted:#6b7280;

  --card:#ffffff;
  --border:#e7e7f2;

  --danger:#e11d48;
  --warning:#f59e0b;
  --success:#16a34a;

  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --shadow2: 0 18px 45px rgba(0,0,0,.12);

  --radius:16px;
  --radius-sm:12px;

  --ring: 0 0 0 4px rgba(103,61,230,.18);
}

/* ===========================
   RESET / GLOBAL
=========================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  padding:0;
  min-height:100vh;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.55;
}

a{ text-decoration:none; color:inherit; }
img, video{ max-width:100%; height:auto; display:block; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
}

/* Better headings */
h1,h2,h3,h4,h5{
  color: var(--brand);
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
}
p{ margin: 0 0 12px 0; color: var(--text); }
small{ color: var(--muted); }

/* ===========================
   NAVBAR
=========================== */
.navbar{
  position: sticky;
  top: 0;
  z-index: 2000;

  display:flex;
  align-items:center;
  justify-content: center;
  gap: 10px;

  padding: 12px 14px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
}

/* links */
.navbar a{
  color:#fff !important;
  font-weight: 700;
  font-size: 14.5px;

  margin: 0 4px;
  padding: 10px 14px;
  border-radius: 12px;

  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

.navbar a:hover{
  background: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.navbar a.active{
  background: rgba(255,255,255,0.24);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

/* right-side nav actions (notifications, user) */
.nav-actions{
  margin-left: auto;
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
}

/* bell */
.notif-bell{
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .2s ease, transform .15s ease;
}
.notif-bell:hover{
  background: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.notif-bell:focus{ outline:none; box-shadow: var(--ring); }

.notif-count{
  background:#ff3b30;
  color:#fff;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 800;
  position:absolute;
  top: 4px;
  right: 4px;
  line-height: 1;
}

/* dropdowns */
.notif-dropdown{
  position:absolute;
  right: 0;
  top: 52px;
  width: 340px;
  max-width: 92vw;

  background: #fff;
  border: 1px solid rgba(231,231,242,.9);
  border-radius: 14px;
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.notif-header, .chat-header{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: #fafafe;
  font-weight: 800;
  color: #2b2f3c;
}

.notif-list, .chat-list{
  max-height: 280px;
  overflow:auto;
  padding: 10px;
}

.notif-list .item, .chat-list .item{
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  background:#f8f8ff;
  border: 1px solid rgba(231,231,242,.8);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.notif-list .item:hover, .chat-list .item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  background:#ffffff;
}

.notif-list .item.unread{
  background:#fff7ed;
  border-left: 4px solid #ffb347;
}

/* Navbar responsive */
@media (max-width: 700px){
  .navbar{
    flex-wrap:wrap;
    justify-content: space-between;
    gap: 8px;
  }
  .navbar a{
    margin: 2px;
    padding: 9px 12px;
  }
  .nav-actions{
    order: 2;
    margin-left:auto;
  }
}

/* ===========================
   CARDS
=========================== */
.card{
  background: var(--card);
  border: 1px solid rgba(231,231,242,.8);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
  transition: transform .18s ease, box-shadow .25s ease;
}

.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow2);
}

/* nice media inside cards */
.card img, .card video{
  border-radius: 14px;
  border: 1px solid rgba(231,231,242,.8);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

/* ===========================
   BUTTONS
=========================== */
button, .btn-main, .btn, .btn-secondary{
  font-family: inherit;
}

.btn-main{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: white;
  border: none;
  border-radius: 14px;
  padding: 11px 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 10px 20px rgba(103,61,230,.22);
}

.btn-main:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(103,61,230,.26);
}

.btn-main:active{ transform: translateY(0); opacity: .95; }
.btn-main:focus{ outline:none; box-shadow: var(--ring); }

/* generic small buttons */
.btn-sm{
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 800;
}

/* danger button */
.btn-danger{
  background: linear-gradient(90deg, #fb7185, var(--danger));
  color:#fff;
  border:none;
  border-radius: 12px;
  font-weight: 800;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 10px 18px rgba(225,29,72,.18);
}
.btn-danger:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(225,29,72,.22);
}

/* make form button full width only if you want:
   comment this block if you don't want full width buttons */
form button{
  width: 100%;
}

/* ===========================
   FORMS
=========================== */
form input, form textarea, form select{
  width: 100%;
  padding: 12px 12px;
  margin: 6px 0 14px 0;
  border-radius: 12px;
  border: 1px solid rgba(231,231,242,.95);
  background: #fff;
  font-family: inherit;
  font-size: 14.5px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}

textarea{ resize: vertical; min-height: 110px; }

form input:focus, form textarea:focus, form select:focus{
  outline: none;
  border-color: rgba(103,61,230,.55);
  box-shadow: var(--ring);
}

form input::placeholder, form textarea::placeholder{
  color: #9aa0ad;
}

/* ===========================
   TABLES
=========================== */
table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(231,231,242,.9);
}

th, td{
  padding: 12px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(231,231,242,.9);
}

th{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: #fff;
  font-weight: 800;
}

tr:hover td{ background: #fafafe; }

/* ===========================
   ALERTS
=========================== */
.alert{
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(231,231,242,.9);
  box-shadow: 0 10px 20px rgba(0,0,0,.04);
}

.alert-success{
  background: rgba(22,163,74,.10);
  color: #0f5132;
  border-color: rgba(22,163,74,.22);
}

.alert-danger{
  background: rgba(225,29,72,.10);
  color: #7f1d1d;
  border-color: rgba(225,29,72,.22);
}

.alert-warning{
  background: rgba(245,158,11,.14);
  color: #7a4b00;
  border-color: rgba(245,158,11,.26);
}

/* ===========================
   LIST GROUP
=========================== */
.list-group-item{
  background: #f8f8ff;
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(231,231,242,.8);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.list-group-item-action:hover{
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.06);
  cursor:pointer;
}

/* ===========================
   AVATAR PLACEHOLDER
=========================== */
.avatar-placeholder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  background:#e9e6ff;
  color:#3b2a9d;
  font-weight:900;
  letter-spacing: .02em;
}

/* ===========================
   AUTH (LOGIN / REGISTER)
=========================== */
.auth-card{
  background:#fff;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(231,231,242,.9);
  box-shadow: var(--shadow2);
}

.auth-card h3{
  margin-top: 0;
  color:#2f2a86;
}

.form-note{
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 12px;
}

.auth-card label{
  font-weight: 800;
  font-size: 13.5px;
  display:block;
  margin-bottom: 6px;
}

.auth-card .form-control{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(231,231,242,.95);
}

.auth-card .btn-secondary{
  text-decoration:none;
  display:inline-block;
  padding: 10px 12px;
  border-radius: 12px;
}

@media (max-width:600px){
  .auth-card{ margin: 12px; padding: 14px; }
}

/* ===========================
   FOOTER
=========================== */
footer{
  text-align:center;
  padding: 22px 16px;
  background: rgba(255,255,255,.6);
  border-top: 1px solid rgba(231,231,242,.9);
  font-size: 14px;
  color: #777;
  margin-top: 24px;
  backdrop-filter: blur(10px);
}

/* ===========================
   ADMIN POSTS
=========================== */
.admin-posts{ margin-top: 18px; }
.admin-post{ margin-bottom: 18px; }
.admin-post .card{ padding: 18px; border-radius: 16px; }
.admin-post .post-title{ margin:0 0 6px 0; color:#3b2a9d; }
.admin-post .post-meta{ color:#6b6b6b; font-size: 13px; }
.admin-post .post-body p{ margin:0; line-height: 1.6; color:#333; }

.admin-post .post-media{ margin-top: 12px; }
.admin-post .post-media img,
.admin-post .post-media video{
  border-radius: 14px;
  max-width: 100%;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

@media (min-width: 900px){
  .admin-posts{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* small visual accent line between posts */
.admin-post + .admin-post{
  border-left: 4px solid rgba(103,61,230,0.06);
  padding-left: 6px;
}
/* =========================================================
   FIX: TEKSTE TË GJATA + FORMA "NORMALE"
   (Shtoje në fund të file-it CSS)
========================================================= */

/* 1) Tekste shumë të gjata: mos prish layout */
.card, .list-group-item, td, th, p, h1,h2,h3,h4,h5, a, span{
  overflow-wrap: anywhere;   /* thyen fjalët shumë të gjata */
  word-break: break-word;
}

/* 2) Paragrafët mos u shtrijnë pafund: line-clamp opcional */
.clamp-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-5{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3) FORMS: mos i bëj gjithçka full-width global.
      Full-width vetëm në wrapper .form-full ose .auth-card */
form input, form textarea, form select{
  width: auto;                 /* ✅ ndryshimi kryesor */
  max-width: 100%;
  display: block;
}

/* ruaj full-width në faqe formash që e duan */
.form-full input,
.form-full textarea,
.form-full select,
.auth-card input,
.auth-card textarea,
.auth-card select{
  width: 100%;
}

/* textarea mos të jetë gjithmonë e madhe */
textarea{
  min-height: 90px;           /* pak më e vogël */
}

/* 4) Button width: mos e bëj 100% global */
form button{
  width: auto;                /* ✅ ndryshimi kryesor */
}

/* por në mobile mund t’i bëjmë full-width vetëm në forma */
@media (max-width: 600px){
  .form-full button,
  .auth-card button{
    width: 100%;
  }
}

/* 5) Tables: mos i lër cell-at të dalin jashtë */
table{
  table-layout: fixed;
}
td, th{
  white-space: normal;
}

/* 6) Në list-group, tekstet e gjata mos të “shpërthejnë” */
.list-group-item h5{
  margin: 0 0 6px 0;
}
.list-group-item p{
  margin: 0;
}

/* 7) Utility: “Read more” pa JS (opsionale) */
.details-soft{
  margin-top:10px;
  background:#fafafe;
  border:1px solid rgba(231,231,242,.95);
  padding:12px;
  border-radius:14px;
}
details summary{
  cursor:pointer;
  font-weight: 900;
  color: var(--brand);
  list-style: none;
}
details summary::-webkit-details-marker{ display:none; }
/* backdrop nën drawer */
#mobileBackdrop{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index: 9000;
  pointer-events:none;
}
#mobileBackdrop.show{
  display:block;
  pointer-events:auto;
}

/* drawer sipër backdrop */
@media (max-width: 900px){
  #mobileNav{
    z-index: 9001;
  }
}