/* =========================================================
   SCUZA-MA.RO - QR SCAN PAGE / APP STYLE 2026
   Full rewrite: mobile app feel + desktop responsive
   ========================================================= */

:root {
  --sm-yellow: #feed01;
  --sm-yellow-2: #fdd000;

  --sm-dark: #2b2a28;
  --sm-dark-2: #1a1918;
  --sm-dark-3: #111110;
  --sm-black: #080807;

  --sm-card: rgba(43, 42, 40, 0.92);
  --sm-card-2: rgba(26, 25, 24, 0.96);

  --sm-border: rgba(254, 237, 1, 0.14);
  --sm-border-strong: rgba(254, 237, 1, 0.36);

  --sm-text: #ffffff;
  --sm-muted: rgba(255, 255, 255, 0.66);
  --sm-muted-2: rgba(255, 255, 255, 0.42);

  --sm-whatsapp: #25d366;
  --sm-whatsapp-2: #16a34a;
  --sm-whatsapp-3: #075e54;

  --sm-radius: 24px;
  --sm-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --sm-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 0%, rgba(254, 237, 1, 0.12), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(254, 237, 1, 0.08), transparent 28%),
    linear-gradient(180deg, var(--sm-dark) 0%, var(--sm-dark-2) 46%, var(--sm-dark-3) 100%) !important;
  color: var(--sm-text) !important;
  font-family: Inter, Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  overflow-x: hidden;
}

body {
  color: var(--sm-text) !important;
}

a {
  text-decoration: none !important;
}

/* =========================================================
   PAPER DASHBOARD STRUCTURE RESET
   ========================================================= */

.main-panel {
  width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
  background: transparent !important;
}

.sidebar {
  background: rgba(17, 17, 16, 0.98) !important;
  border-right: 1px solid var(--sm-border) !important;
  box-shadow: 20px 0 80px rgba(0, 0, 0, 0.34) !important;
}

.sidebar .logo {
  border-bottom: 1px solid var(--sm-border) !important;
}

.sidebar .logo .simple-text {
  color: var(--sm-text) !important;
  font-weight: 900 !important;
}

.sidebar .nav li > a {
  margin: 7px 12px !important;
  border-radius: 16px !important;
  color: rgba(255, 255, 255, 0.66) !important;
}

.sidebar .nav li > a:hover {
  background: rgba(254, 237, 1, 0.10) !important;
  color: var(--sm-yellow) !important;
}

.sidebar .nav i {
  color: var(--sm-yellow) !important;
}

/* =========================================================
   NAVBAR - DESKTOP / TABLET
   ========================================================= */

.scan-navbar,
.navbar.navbar-transparent,
.navbar.navbar-absolute {
  min-height: 86px !important;
  background: rgba(26, 25, 24, 0.94) !important;
  border-bottom: 1px solid var(--sm-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
  z-index: 1050 !important;
}

.scan-navbar-inner {
  width: 100%;
  max-width: 1180px;
  min-height: 86px;
  margin: 0 auto;
  padding: 0 22px !important;

  display: grid !important;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}

.scan-navbar-left {
  width: 44px;
  height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.scan-navbar .navbar-toggle {
  display: flex !important;
  position: static !important;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

.scan-navbar .navbar-toggler {
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 44px;
  height: 44px;
  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid rgba(254, 237, 1, 0.20) !important;
  border-radius: 14px !important;
  background: rgba(254, 237, 1, 0.07) !important;
  box-shadow: none !important;
}

.scan-navbar .navbar-toggler-bar {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  margin: 3px 0 !important;
  border-radius: 999px !important;
  background: var(--sm-yellow) !important;
}

.scan-logo-only {
  min-width: 0;
  justify-self: center;

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

  width: min(260px, 56vw);
  height: 60px;

  overflow: hidden;
  text-decoration: none !important;
}

.scan-logo-only img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.scan-navbar-spacer {
  width: 44px;
  height: 44px;
}

/* Dezactivăm textul vechi din navbar, dar nu mecanismul meniului */
.scan-navbar .navbar-brand,
.scan-navbar .navbar-brand::before,
.scan-navbar .navbar-brand::after,
.navbar .navbar-brand::before,
.navbar .navbar-brand::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   PAGE LAYOUT - DESKTOP
   ========================================================= */

.main-panel > .content {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 118px 22px 48px !important;
}

.content > .row {
  display: grid !important;
  grid-template-columns: 410px minmax(420px, 1fr);
  gap: 28px;
  align-items: start;
  justify-content: center;
  margin: 0 !important;
}

.content > .row > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

/* =========================================================
   CARDS
   ========================================================= */

.card,
.card-user {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sm-border) !important;
  border-radius: var(--sm-radius) !important;
  background:
    linear-gradient(180deg, rgba(43, 42, 40, 0.96), rgba(26, 25, 24, 0.96)) !important;
  box-shadow: var(--sm-shadow-soft) !important;
  color: var(--sm-text) !important;
}

.card::before,
.card-user::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%),
    radial-gradient(circle at top right, rgba(254, 237, 1, 0.08), transparent 34%);
}

.card:hover,
.card-user:hover {
  border-color: var(--sm-border-strong) !important;
  box-shadow: var(--sm-shadow) !important;
}

/* =========================================================
   LEFT PROFILE CARD
   ========================================================= */

.content .col-md-4 > .card-user {
  margin: 0 !important;
}

.card-user .image {
  height: 178px !important;
  overflow: hidden;
  background: var(--sm-dark-2);
  border-radius: var(--sm-radius) var(--sm-radius) 0 0 !important;
}

.card-user .image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.46)),
    radial-gradient(circle at center, rgba(254, 237, 1, 0.12), transparent 34%);
}

.card-user .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.05) contrast(1.05) brightness(0.86);
}

.card-user .card-body {
  position: relative;
  z-index: 2;
  min-height: auto !important;
  padding: 0 24px 16px !important;
}

/* Logo din card - simplu, fără cerc/fundal */
.card-user .author {
  margin-top: -18px !important;
  position: relative;
  z-index: 3;
  text-align: center;
}

.card-user .author a {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-decoration: none !important;
}

.card-user .avatar,
.card-user img.avatar,
.card-user .avatar.border-gray {
  width: 220px !important;
  height: auto !important;
  max-width: 78% !important;
  padding: 0 !important;
  margin: 0 auto !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  object-fit: contain !important;
  object-position: center !important;
}

.card-user .author .title {
  display: none !important;
}

/* Numărul auto în card */
.card-user .description {
  max-width: 330px;
  margin: 0 auto 12px !important;
  color: var(--sm-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

.card-user .description::before {
  display: none !important;
  content: none !important;
}

/* Footer card profil */
.card-user .card-footer {
  position: relative;
  z-index: 2;
  padding: 0 22px 22px !important;
  background: transparent !important;
}

.card-user .card-footer hr {
  display: none !important;
}

/* =========================================================
   CONTACT BUTTONS
   ========================================================= */

.button-container .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

.button-container [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.button-container a.btn,
.button-container .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;

  width: 100%;
  min-height: 56px;
  padding: 0 20px !important;

  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none !important;

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.button-container a.btn::before,
.button-container .btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 62%);
  opacity: 0.75;
}

.button-container a.btn:hover,
.button-container .btn:hover {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.04);
}

/* Apel = galben brand */
.button-container a[href^="tel"],
.button-container a.bg-success,
.button-container a.btn-call {
  background: linear-gradient(135deg, var(--sm-yellow) 0%, var(--sm-yellow-2) 100%) !important;
  color: var(--sm-dark) !important;
  box-shadow:
    0 18px 42px rgba(254, 237, 1, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* Mesaj / WhatsApp = verde */
.button-container a[href*="wa.me"],
.button-container a[href*="whatsapp"],
.button-container a.bg-primary,
.button-container a.btn-whatsapp {
  background: linear-gradient(135deg, var(--sm-whatsapp) 0%, var(--sm-whatsapp-2) 54%, var(--sm-whatsapp-3) 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 18px 42px rgba(37, 211, 102, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.button-container a.btn i,
.button-container .btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  line-height: 1 !important;
  font-style: normal !important;
}

.button-container a.btn i.fa-phone {
  gap: 8px;
}

/* =========================================================
   LICENSE PLATE
   ========================================================= */

/* ascundem inputul vechi dacă există */
.licenseplate,
input.licenseplate {
  display: none !important;
}

.content .container:has(.licenseplate) {
  display: none !important;
}

.plate-wrapper,
.left-side-plate-wrap {
  margin-top: 14px;
}

.licenseplate-modern {
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 78px;
  padding: 14px 20px;

  color: #ffffff;


  font-family: Inter, Montserrat, Arial, sans-serif;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;

  position: relative;
  overflow: hidden;
}

/* =========================================================
   FORM CARD
   ========================================================= */

.col-md-6 .card-user {
  min-height: auto;
}

.col-md-6 .card-header {
  position: relative;
  z-index: 2;
  padding: 34px 34px 0 !important;
  background: transparent !important;
}

.col-md-6 .card-title {
  margin: 0 0 10px !important;
  color: var(--sm-text) !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.06em;
}

.col-md-6 .card-title::after {
  content: "Alege motivul și trimite rapid o notificare proprietarului.";
  display: block;
  max-width: 560px;
  margin-top: 12px;
  color: var(--sm-muted);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0;
}

.col-md-6 .card-body {
  position: relative;
  z-index: 2;
  padding: 24px 34px 34px !important;
}

.col-md-6 .description {
  margin: 0 0 10px !important;
  color: var(--sm-muted) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.col-md-6 .card-body > p.description:first-child {
  font-size: 0 !important;
  margin-bottom: 10px !important;
}

.col-md-6 .card-body > p.description:first-child::after {
  content: "Motiv notificare";
  font-size: 14px;
  color: var(--sm-muted);
  font-weight: 800;
}

/* Formular */
#profile-form {
  display: grid;
  gap: 16px;
}

.form-select,
.form-control,
textarea.form-control {
  width: 100%;
  border: 1px solid var(--sm-border) !important;
  border-radius: 18px !important;
  background: rgba(17, 17, 16, 0.72) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 30px rgba(0, 0, 0, 0.16);
  font-size: 16px !important;
  font-weight: 650 !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.form-select {
  min-height: 58px;
  padding: 0 48px 0 18px !important;
  cursor: pointer;
}

textarea.form-control {
  min-height: 120px;
  padding: 18px !important;
  resize: vertical;
}

.form-select option {
  background: var(--sm-dark-2);
  color: #ffffff;
}

.form-select:focus,
.form-control:focus,
textarea.form-control:focus {
  border-color: rgba(254, 237, 1, 0.74) !important;
  box-shadow:
    0 0 0 5px rgba(254, 237, 1, 0.12),
    0 16px 36px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-1px);
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
  opacity: 1;
}

/* Submit */
#profile-form .btn-primary,
button.btn-primary.btn-round {
  width: auto;
  min-width: 220px;
  min-height: 58px;
  margin-top: 6px;
  padding: 0 30px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: linear-gradient(135deg, var(--sm-yellow) 0%, var(--sm-yellow-2) 100%) !important;
  color: var(--sm-dark) !important;

  box-shadow:
    0 20px 48px rgba(254, 237, 1, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);

  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em;
  text-transform: uppercase;

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#profile-form .btn-primary::after,
button.btn-primary.btn-round::after {
  content: " →";
}

#profile-form .btn-primary:hover,
button.btn-primary.btn-round:hover {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.02);
  box-shadow:
    0 26px 58px rgba(254, 237, 1, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.update {
  margin: 0 !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer,
.footer.footer-black,
.footer.footer-white {
  background: rgba(17, 17, 16, 0.88) !important;
  border-top: 1px solid var(--sm-border) !important;
  color: var(--sm-muted) !important;
  padding: 28px 18px !important;
}

.footer .container-fluid {
  max-width: 1180px;
  margin: 0 auto;
}

.footer .row {
  align-items: center;
  gap: 16px;
}

.footer ul {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 0;
  margin: 0;
}

.footer a {
  color: var(--sm-muted) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.footer a:hover {
  color: var(--sm-yellow) !important;
}

.footer .copyright {
  color: var(--sm-muted-2) !important;
  font-size: 13px;
}

/* =========================================================
   LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1199px) {
  .main-panel > .content {
    max-width: 1040px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .content > .row {
    grid-template-columns: 390px minmax(420px, 1fr);
    gap: 24px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  .scan-navbar,
  .navbar.navbar-transparent,
  .navbar.navbar-absolute,
  .scan-navbar-inner {
    min-height: 76px !important;
  }

  .scan-navbar-inner {
    grid-template-columns: 42px 1fr 42px;
    padding: 0 14px !important;
  }

  .scan-navbar-left,
  .scan-navbar .navbar-toggle,
  .scan-navbar .navbar-toggler,
  .scan-navbar-spacer {
    width: 42px !important;
    height: 42px !important;
  }

  .scan-logo-only {
    width: min(210px, 58vw);
    height: 50px;
  }

  .main-panel > .content {
    padding: 94px 14px 34px !important;
  }

  .content > .row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .card,
  .card-user {
    border-radius: 24px !important;
  }

  .card-user .image {
    height: 210px !important;
  }

  .card-user .card-body {
    padding: 0 22px 16px !important;
  }

  .card-user .avatar,
  .card-user img.avatar,
  .card-user .avatar.border-gray {
    width: 240px !important;
    max-width: 78% !important;
  }

  .licenseplate-modern {
    min-height: 82px;
    font-size: clamp(32px, 9vw, 50px);
    letter-spacing: 0.06em;
    border-radius: 20px;
  }

  .col-md-6 .card-header {
    padding: 30px 24px 0 !important;
  }

  .col-md-6 .card-body {
    padding: 24px 24px 30px !important;
  }

  .col-md-6 .card-title {
    font-size: 34px !important;
  }

  #profile-form .btn-primary,
  button.btn-primary.btn-round {
    width: 100%;
  }

  .footer nav,
  .footer .credits,
  .footer .copyright {
    width: 100%;
    justify-content: center !important;
    text-align: center;
  }
}

/* =========================================================
   MOBILE - APP HERO MODE
   Poza începe sus, meniul peste poza
   ========================================================= */

@media (max-width: 575px) {
  html,
  body {
    background:
      radial-gradient(circle at 20% 0%, rgba(254, 237, 1, 0.12), transparent 34%),
      linear-gradient(180deg, var(--sm-dark) 0%, var(--sm-dark-2) 46%, var(--sm-dark-3) 100%) !important;
  }

  /* Navbar invizibil ca bară, dar meniul rămâne activ */
  .scan-navbar,
  .navbar.navbar-transparent,
  .navbar.navbar-absolute {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    min-height: 0 !important;
    height: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;

    z-index: 9999 !important;
    pointer-events: none;
  }

  .scan-navbar-inner {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .scan-logo-only,
  .scan-navbar-spacer {
    display: none !important;
  }

  /* Meniul peste poza, mai sus */
  .scan-navbar-left,
  .scan-navbar .navbar-toggle {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    left: 14px !important;

    width: 40px !important;
    height: 40px !important;

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

    z-index: 10000 !important;
    pointer-events: auto !important;
  }

  .scan-navbar .navbar-toggler {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(254, 237, 1, 0.36) !important;
    border-radius: 13px !important;
    background: rgba(26, 25, 24, 0.74) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36) !important;
  }

  .scan-navbar .navbar-toggler-bar {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    border-radius: 999px !important;
    background: var(--sm-yellow) !important;
  }

  /* Conținutul nu mai este împins de navbar */
  .main-panel > .content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 28px !important;
  }

  .content > .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  .content > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .content .col-md-4,
  .content .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cardul mașinii full-width, aproape lipit stânga-dreapta */
  .content .col-md-4 > .card-user {
    margin: 0 !important;
    border-radius: 22px !important;
  }

  .content .col-md-4 > .card-user .image {
    height: 132px !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .content .col-md-4 > .card-user .image img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .content .col-md-4 > .card-user .author {
    margin-top: -16px !important;
  }

  .content .col-md-4 > .card-user .avatar,
  .content .col-md-4 > .card-user img.avatar,
  .content .col-md-4 > .card-user .avatar.border-gray {
    width: 190px !important;
    max-width: 76% !important;
  }

  .card-user .card-body {
    padding: 0 16px 14px !important;
  }

  .card-user .description {
    margin-top: -13px !important;
    font-size: 12px !important;
  }

  .card-user .card-footer {
    padding: 0 14px 18px !important;
  }

  .button-container .row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .button-container a.btn,
  .button-container .btn {
    min-height: 56px !important;
    padding: 0 22px !important;
    font-size: 14px !important;
  }

  .licenseplate-modern {
    min-height: 74px;
    padding: 12px 16px;
    font-size: clamp(30px, 9.6vw, 42px);
    letter-spacing: 0.055em;
  }

  .col-md-6 .card-user {
    border-radius: 22px !important;
  }

  .col-md-6 .card-header {
    padding: 26px 20px 0 !important;
  }

  .col-md-6 .card-body {
    padding: 20px 20px 26px !important;
  }

  .col-md-6 .card-title {
    font-size: 29px !important;
  }

  .col-md-6 .card-title::after {
    font-size: 14px;
  }

  .form-select {
    min-height: 56px;
  }

  textarea.form-control {
    min-height: 112px;
  }

  .footer ul {
    flex-direction: column;
    gap: 8px;
  }

  .footer .copyright {
    display: block !important;
    line-height: 1.8;
  }
}

/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {
  .main-panel > .content {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .content .col-md-4 > .card-user .image {
    height: 200px !important;
  }

  .content .col-md-4 > .card-user .avatar,
  .content .col-md-4 > .card-user img.avatar,
  .content .col-md-4 > .card-user .avatar.border-gray {
    width: 176px !important;
  }

  .scan-navbar-left,
  .scan-navbar .navbar-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    left: 12px !important;
  }
}

.sidebar,
.sidebar[data-color="white"],
.off-canvas-sidebar,
.off-canvas-sidebar[data-color="white"] {
  background: #1a1918 !important;
}

/* Paper Dashboard pune fundalul alb pe ::after */
.sidebar::after,
.sidebar[data-color="white"]::after,
.off-canvas-sidebar::after,
.off-canvas-sidebar[data-color="white"]::after {
  background: #1a1918 !important;
  background-color: #1a1918 !important;
}

/* Uneori fundalul vine și din ::before */
.sidebar::before,
.sidebar[data-color="white"]::before,
.off-canvas-sidebar::before,
.off-canvas-sidebar[data-color="white"]::before {
  background: #1a1918 !important;
  background-color: #1a1918 !important;
  opacity: 1 !important;
}

/* Interiorul meniului */
.sidebar .sidebar-wrapper,
.off-canvas-sidebar .sidebar-wrapper {
  background: transparent !important;
}

/* Zona logo */
.sidebar .logo,
.off-canvas-sidebar .logo {
  background: #1a1918 !important;
  border-bottom: 1px solid rgba(254, 237, 1, 0.14) !important;
}

.sidebar .logo::after,
.off-canvas-sidebar .logo::after {
  background: rgba(254, 237, 1, 0.14) !important;
}

/* Text logo */
.sidebar .logo a,
.sidebar .logo .simple-text,
.off-canvas-sidebar .logo a,
.off-canvas-sidebar .logo .simple-text {
  color: #ffffff !important;
}

/* Linkuri meniu */
.sidebar .nav li > a,
.off-canvas-sidebar .nav li > a {
  color: rgba(255, 255, 255, 0.72) !important;
  background: transparent !important;
}

.sidebar .nav li > a:hover,
.sidebar .nav li.active > a,
.off-canvas-sidebar .nav li > a:hover,
.off-canvas-sidebar .nav li.active > a {
  color: #feed01 !important;
  background: rgba(254, 237, 1, 0.10) !important;
}

/* Iconițe */
.sidebar .nav i,
.off-canvas-sidebar .nav i {
  color: #feed01 !important;
}

.sidebar .nav p,
.off-canvas-sidebar .nav p {
  color: inherit !important;
}

@media (min-width: 992px) {

  /* Sidebar rămâne vizibil, normal */
  .sidebar {
    display: block !important;
    transform: none !important;
    left: 0 !important;
    width: 260px !important;
    z-index: 1030 !important;
  }

  /* Main panel începe după sidebar */
  .main-panel {
    width: calc(100% - 260px) !important;
    margin-left: 260px !important;
    float: none !important;
    background: transparent !important;
  }

  /* Ascundem complet bara de sus pe PC */
  .scan-navbar,
  .navbar.navbar-transparent,
  .navbar.navbar-absolute {
    display: none !important;
  }

  /* Conținutul nu mai are padding pentru navbar */
  .main-panel > .content {
    max-width: 1180px !important;
    margin: 0 auto !important;

    padding-top: 34px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-bottom: 48px !important;
  }

  /* Layout echilibrat în spațiul rămas după sidebar */
  .content > .row {
    display: grid !important;
    grid-template-columns: minmax(360px, 430px) minmax(440px, 1fr) !important;
    gap: 34px !important;
    align-items: start !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .content > .row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
  }

  /* Dezactivăm orice overlay desktop rămas din încercări anterioare */
  .nav-open .main-panel::before,
  .nav-open .wrapper::before {
    display: none !important;
    content: none !important;
  }
}

.sidebar .logo a.logo-mini, .off-canvas-sidebar .logo a.logo-mini {
  width: 100%;
}

/* Textarea mesaj - 100% din spațiul formularului, ca selectul */
#profile-form textarea.form-control,
#profile-form textarea#mesaj2,
textarea#mesaj2.form-control {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;

  min-height: 150px !important;
  height: 150px !important;
  max-height: none !important;

  padding: 18px !important;
  margin: 0 !important;

  resize: vertical !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Repară problema când textarea este în interiorul unui <p class="description"> */
#profile-form p.description,
.col-md-6 .card-body p.description {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Pe desktop îl facem puțin mai înalt */
@media (min-width: 992px) {
  #profile-form textarea.form-control,
  #profile-form textarea#mesaj2,
  textarea#mesaj2.form-control {
    min-height: 170px !important;
    height: 170px !important;
  }
}

/* Pe mobil păstrează full width, dar nu prea înalt */
@media (max-width: 575px) {
  #profile-form textarea.form-control,
  #profile-form textarea#mesaj2,
  textarea#mesaj2.form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 140px !important;
    height: 140px !important;
  }
}