/* Custom */

/* <html> nu avea background-color deloc (transparent) - pe iOS Safari/
   Chrome, la overscroll ("rubber-band", tragi pagina dincolo de capat),
   zona dezvaluita arata fundalul lui <html>, nu al lui <body> - de-aia
   aparea alb la capatul paginii pe telefon, pe ORICE pagina (chiar si
   fara login), semnalat explicit de user. Fix: aceeasi culoare ca body,
   deja theme-aware prin variabila Tabler. */
html{
    background-color: var(--tblr-body-bg);
}

@media (min-width: 992px) {
    :host,:root {
        margin-left: 0;
        /*margin-left:calc(100vw - 100%);*/
        margin-right: 0
    }
}

.tdn {
  text-decoration: none !important;
}

@media (max-width: 576px) {
    .mobile-hide-fs {
        font-size: unset !important;
    }
}

/* Setari tema */
  [data-bs-theme-base=obsidian] {
  --tblr-gray-50:  #f3f4f5;
  --tblr-gray-100: #dfe1e3;
  --tblr-gray-200: #b9bdc1;
  --tblr-gray-300: #90979d;
  --tblr-gray-400: #686f76;
  --tblr-gray-500: #4b5259;
  --tblr-gray-600: #34393f;
  --tblr-gray-700: #23272b;
  --tblr-gray-800: #141619;
  --tblr-gray-900: #0a0b0d;
  --tblr-gray-950: #040405;
}

[data-bs-theme-base=void] {
  --tblr-gray-50:  #f1f2f3;
  --tblr-gray-100: #dcdee0;
  --tblr-gray-200: #b6b9bd;
  --tblr-gray-300: #8c9095;
  --tblr-gray-400: #5f6369;
  --tblr-gray-500: #40444a;
  --tblr-gray-600: #2b2e33;
  --tblr-gray-700: #1a1c1f;
  --tblr-gray-800: #0e0f11;
  --tblr-gray-900: #060607;
  --tblr-gray-950: #010101;
}


[data-bs-theme-base=slate] {
  --tblr-gray-50: #f8fafc;
  --tblr-gray-100: #f1f5f9;
  --tblr-gray-200: #e2e8f0;
  --tblr-gray-300: #cbd5e1;
  --tblr-gray-400: #94a3b8;
  --tblr-gray-500: #64748b;
  --tblr-gray-600: #475569;
  --tblr-gray-700: #334155;
  --tblr-gray-800: #1e293b;
  --tblr-gray-900: #0f172a;
  --tblr-gray-950: #020617;
}

[data-bs-theme-base=gray] {
  --tblr-gray-50: #f9fafb;
  --tblr-gray-100: #f3f4f6;
  --tblr-gray-200: #e5e7eb;
  --tblr-gray-300: #d1d5db;
  --tblr-gray-400: #9ca3af;
  --tblr-gray-500: #6b7280;
  --tblr-gray-600: #4b5563;
  --tblr-gray-700: #374151;
  --tblr-gray-800: #1f2937;
  --tblr-gray-900: #111827;
  --tblr-gray-950: #030712;
}

[data-bs-theme-base=zinc] {
  --tblr-gray-50: #fafafa;
  --tblr-gray-100: #f4f4f5;
  --tblr-gray-200: #e4e4e7;
  --tblr-gray-300: #d4d4d8;
  --tblr-gray-400: #a1a1aa;
  --tblr-gray-500: #71717a;
  --tblr-gray-600: #52525b;
  --tblr-gray-700: #3f3f46;
  --tblr-gray-800: #27272a;
  --tblr-gray-900: #18181b;
  --tblr-gray-950: #09090b;
}

[data-bs-theme-base=neutral] {
  --tblr-gray-50: #fafafa;
  --tblr-gray-100: #f5f5f5;
  --tblr-gray-200: #e5e5e5;
  --tblr-gray-300: #d4d4d4;
  --tblr-gray-400: #a3a3a3;
  --tblr-gray-500: #737373;
  --tblr-gray-600: #525252;
  --tblr-gray-700: #404040;
  --tblr-gray-800: #262626;
  --tblr-gray-900: #171717;
  --tblr-gray-950: #0a0a0a;
}

[data-bs-theme-base=stone] {
  --tblr-gray-50: #fafaf9;
  --tblr-gray-100: #f5f5f4;
  --tblr-gray-200: #e7e5e4;
  --tblr-gray-300: #d6d3d1;
  --tblr-gray-400: #a8a29e;
  --tblr-gray-500: #78716c;
  --tblr-gray-600: #57534e;
  --tblr-gray-700: #44403c;
  --tblr-gray-800: #292524;
  --tblr-gray-900: #1c1917;
  --tblr-gray-950: #0c0a09;
}

[data-bs-theme-base=charcoal] {
  --tblr-gray-50:  #f5f7fa;
  --tblr-gray-100: #e4e7eb;
  --tblr-gray-200: #cbd2d9;
  --tblr-gray-300: #9aa5b1;
  --tblr-gray-400: #7b8794;
  --tblr-gray-500: #616e7c;
  --tblr-gray-600: #52606d;
  --tblr-gray-700: #3e4c59;
  --tblr-gray-800: #323f4b;
  --tblr-gray-900: #1f2933;
  --tblr-gray-950: #121317;
}

[data-bs-theme-base=smoke] {
  --tblr-gray-50:  #fdfdfc;
  --tblr-gray-100: #f7f6f4;
  --tblr-gray-200: #e9e7e3;
  --tblr-gray-300: #d3d0ca;
  --tblr-gray-400: #b1aca3;
  --tblr-gray-500: #8c867b;
  --tblr-gray-600: #6e685d;
  --tblr-gray-700: #524d43;
  --tblr-gray-800: #37332c;
  --tblr-gray-900: #201d18;
  --tblr-gray-950: #0d0c0a;
}

[data-bs-theme-base=graphite] {
  --tblr-gray-50:  #f8f9fa;
  --tblr-gray-100: #e9ecef;
  --tblr-gray-200: #dee2e6;
  --tblr-gray-300: #adb5bd;
  --tblr-gray-400: #868e96;
  --tblr-gray-500: #495057;
  --tblr-gray-600: #343a40;
  --tblr-gray-700: #212529;
  --tblr-gray-800: #16191c;
  --tblr-gray-900: #0d0f11;
  --tblr-gray-950: #050607;
}

[data-bs-theme-base=mist] {
  --tblr-gray-50:  #f8f9fb;
  --tblr-gray-100: #ebf0f5;
  --tblr-gray-200: #d9e0eb;
  --tblr-gray-300: #bfc8d6;
  --tblr-gray-400: #9caabf;
  --tblr-gray-500: #7a8da5;
  --tblr-gray-600: #5f7290;
  --tblr-gray-700: #495a76;
  --tblr-gray-800: #2f3d52;
  --tblr-gray-900: #1c2a3b;
  --tblr-gray-950: #0d1620;
}

[data-bs-theme-base=willow] {
  --tblr-gray-50:  #f8faf7;
  --tblr-gray-100: #eef1ec;
  --tblr-gray-200: #e1e6de;
  --tblr-gray-300: #cdd3c7;
  --tblr-gray-400: #aab29f;
  --tblr-gray-500: #87967d;
  --tblr-gray-600: #6b785f;
  --tblr-gray-700: #515c45;
  --tblr-gray-800: #373f2e;
  --tblr-gray-900: #1c2018;
  --tblr-gray-950: #0e100c;
}







[data-bs-theme-primary=blue] {
  --tblr-primary: #066fd1;
  --tblr-primary-rgb: 6, 111, 209;
}

[data-bs-theme-primary=azure] {
  --tblr-primary: #4299e1;
  --tblr-primary-rgb: 66, 153, 225;
}

[data-bs-theme-primary=indigo] {
  --tblr-primary: #4263eb;
  --tblr-primary-rgb: 66, 99, 235;
}

[data-bs-theme-primary=purple] {
  --tblr-primary: #ae3ec9;
  --tblr-primary-rgb: 174, 62, 201;
}

[data-bs-theme-primary=pink] {
  --tblr-primary: #d6336c;
  --tblr-primary-rgb: 214, 51, 108;
}

[data-bs-theme-primary=red] {
  --tblr-primary: #d63939;
  --tblr-primary-rgb: 214, 57, 57;
}

[data-bs-theme-primary=orange] {
  --tblr-primary: #f76707;
  --tblr-primary-rgb: 247, 103, 7;
}

[data-bs-theme-primary=yellow] {
  --tblr-primary: #f59f00;
  --tblr-primary-rgb: 245, 159, 0;
}

[data-bs-theme-primary=lime] {
  --tblr-primary: #74b816;
  --tblr-primary-rgb: 116, 184, 22;
}

[data-bs-theme-primary=green] {
  --tblr-primary: #2fb344;
  --tblr-primary-rgb: 47, 179, 68;
}

[data-bs-theme-primary=teal] {
  --tblr-primary: #0ca678;
  --tblr-primary-rgb: 12, 166, 120;
}

[data-bs-theme-primary=cyan] {
  --tblr-primary: #17a2b8;
  --tblr-primary-rgb: 23, 162, 184;
}

[data-bs-theme-radius="0"] {
  --tblr-border-radius-scale: 0;
}

[data-bs-theme-radius="0.5"] {
  --tblr-border-radius-scale: 0.5;
}

[data-bs-theme-radius="1"] {
  --tblr-border-radius-scale: 1;
}

[data-bs-theme-radius="1.5"] {
  --tblr-border-radius-scale: 1.5;
}

[data-bs-theme-radius="2"] {
  --tblr-border-radius-scale: 2;
}

[data-bs-theme-primary=inverted] {
  --tblr-primary: var(--tblr-gray-800);
  --tblr-primary-fg: var(--tblr-light);
  --tblr-primary-rgb: 31, 41, 55;
}
[data-bs-theme-primary=inverted][data-bs-theme=dark],
[data-bs-theme-primary=inverted] [data-bs-theme=dark] {
  --tblr-primary: #f9fafb;
  --tblr-primary-fg: var(--tblr-dark);
  --tblr-primary-rgb: 249, 250, 251;
}

[data-bs-theme-font=monospace] {
  --tblr-body-font-family: var(--tblr-font-monospace);
  --tblr-body-font-size: 80%;
}

[data-bs-theme-font=sans-serif] {
  --tblr-body-font-family: var(--tblr-font-sans-serif);
}

[data-bs-theme-font=serif] {
  --tblr-body-font-family: var(--tblr-font-serif);
}

[data-bs-theme-font=comic] {
  --tblr-body-font-family: var(--tblr-font-comic);
}


[data-bs-theme-font-size="xs"] {
  font-size: 14px;
}

[data-bs-theme-font-size="sm"] {
  font-size: 16px;
}

[data-bs-theme-font-size="md"] {
  font-size: 18px;
}

[data-bs-theme-font-size="lg"] {
  font-size: 20px;
}

[data-bs-theme-font-size="xl"] {
  font-size: 22px;
}

/* Custom fix navbar space */
    @media (min-width: 992px) {
      :host, :root {
        margin-left: 0;
        /* margin-left: calc(100vw - 100%); */
        margin-right: 0;
      }
    }

/* Animatie pentru culorile de nick tip gradient (setare_culoare.php) */
@keyframes username-gradient-shift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes username-hue-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes username-text-glow {
    0%, 100% { text-shadow: 0 0 3px currentColor, 0 0 6px currentColor; }
    50% { text-shadow: 0 0 6px currentColor, 0 0 10px currentColor; }
}
@keyframes username-bounce {
    0%, 100% { transform: translateY(0); }
    40%, 60% { transform: translateY(-10px); }
}
@keyframes username-flip {
    0%, 30% { transform: perspective(400px) rotateY(0deg); }
    70%, 100% { transform: perspective(400px) rotateY(360deg); }
}
@keyframes username-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes username-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
@keyframes username-wobble {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-5deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-2deg); }
}
@keyframes username-wave {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
}
@keyframes username-stack-flow {
    0%, 100% { transform: translateY(0); font-weight: 400; }
    15%, 55% { transform: translateY(0); font-weight: 900; }
    70% { transform: translateY(-0.35em); font-weight: 500; }
    85% { transform: translateY(0); font-weight: 900; }
}
@keyframes username-disappear-l {
    0%, 30% { transform: skew(0deg) translateY(0%); text-shadow: 0px 0px 0px gold; opacity: 1; }
    50%, 60% { transform: skew(50deg) translateY(-200%); text-shadow: 0px 0px 50px gold; opacity: 0; }
    80%, 100% { transform: skew(0deg) translateY(0%); text-shadow: 0px 0px 0px gold; opacity: 1; }
}
@keyframes username-disappear-r {
    0%, 30% { transform: skew(0deg) translateY(0%); text-shadow: 0px 0px 0px gold; opacity: 1; }
    50%, 60% { transform: skew(-50deg) translateY(-200%); text-shadow: 0px 0px 50px gold; opacity: 0; }
    80%, 100% { transform: skew(0deg) translateY(0%); text-shadow: 0px 0px 0px gold; opacity: 1; }
}
@keyframes username-fill {
    0%, 10%, 100% { width: 0%; }
    70%, 90% { width: 100%; }
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* icon-pulse - folosit la iconitele "sparkles" de langa "Notificari in timp
   real" (header.tpl), ca sa atraga atentia */
@keyframes icon-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.55; }
}
.icon-pulse {
    animation: icon-pulse 1.4s ease-in-out infinite;
    display: inline-block;
}

/* icon-tada - folosit la iconitele "sparkles" de langa "Notificari in timp
   real" (header.tpl) - efect tada clasic (scale+rotate), mai "sarbatoresc"
   decat pulse simplu */
@keyframes icon-tada {
    0% { transform: scale3d(1,1,1); }
    10%, 20% { transform: scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); }
    40%, 60%, 80% { transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); }
    100% { transform: scale3d(1,1,1); }
}
.icon-tada {
    animation: icon-tada 1.5s ease-in-out infinite;
    display: inline-block;
}

/* PREVIEW ATASAMENTE (poza/video/gif/vocal) - banda minimala cu accent
   colorat pe stanga, folosita de orice input care poate trimite media:
   conversatii, camera, mesaje live, comentarii poza/live, editare mesaj */
.attach-band {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #dadee4);
    border-left: 3px solid var(--accent-b, #206bc4);
    border-radius: 10px;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.attach-band-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tblr-bg-surface-secondary, #eef1f4);
}
.attach-band-thumb img,
.attach-band-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.attach-band-body {
    flex: 1;
    min-width: 0;
}
.attach-band-title {
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 1px;
}
.attach-band-sub {
    font-size: .72rem;
    color: var(--tblr-secondary-color, #67748e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-band-close {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tblr-secondary-color, #67748e);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.attach-band-close:hover {
    background: var(--tblr-active-bg, #f1f3f6);
    color: #d63939;
}
.attach-band-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--tblr-bg-surface-secondary, #eef1f4);
}
.attach-band-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-b, #206bc4);
    transition: width .15s ease;
}

/* Logo Sicula - tema Light */
.sicula-logo-icon-bg {
    fill: #066fd1;
}

.sicula-logo-icon {
    stroke: #ffffff;
}

.sicula-logo-text {
    fill: #4a4a4a;
}

/* Logo Sicula - tema Dark */
[data-bs-theme="dark"] .sicula-logo-icon-bg {
    fill: #ffffff;
}

[data-bs-theme="dark"] .sicula-logo-icon {
    stroke: #202b3c;
}

[data-bs-theme="dark"] .sicula-logo-text {
    fill: #ffffff;
}

/* Dimensiuni logo - identice cu cele originale Tabler (110x32) */
.navbar-brand-image {
    width: 110px !important;
    height: 32px !important;
    max-height: none !important;
}

/* Dropdown-urile de mesaje/notificari din header au fost restilizate la
   cererea userului "acelasi stil ca la profilul meu/setari/deconectare" -
   randuri simple icon+text (dropdown-item + dropdown-item-icon), identice
   structural cu dropdown-ul de cont. Fara pozitionare custom - se comporta
   ca dropdown-ul de cont (dropdown-menu-end, aliniat la dreapta iconitei).
   Diferenta: continutul lor (nume+preview mesaj, text notificare, link
   "Vezi toate...") e mai lat decat etichetele fixe scurte ale dropdown-ului
   de cont, iar iconita de mesaje/notificari nu sta chiar la marginea din
   dreapta a ecranului (mai sunt notificari/avatar dupa ea) - aliniat la
   dreapta ei, un dropdown lat tot iese in stanga ecranului pe un telefon
   ingust (raportat direct, testat live: 9px overflow chiar si cu
   max-width relativ la ecran). O limita ABSOLUTA (nu relativa la ecran) e
   necesara - sub latimea disponibila intre iconita de mesaje (cea mai din
   stanga dintre cele doua) si marginea ecranului pe cele mai inguste
   telefoane reale (~375px); textul lung se incadreaza natural pe 2 randuri
   (dropdown-item nu are nowrap by default) */
.header-dropdown-safe {
    max-width: 230px;
}