{% load static %}

:root{
  --btnColorText: white;
  --btnColor1: #604444;
  --btnColor2: #935252;
  --btnBorderSize: 1px solid;
  /* --page-background-color: #363633; */
  --page-background-color:#EEAECA;
  --normar-text-color: white;

  --pagination-background-color: #191a01;
  /* --pagination-border-color: #f17b00; */
  --pagination-border-color: white;
  --pagination-color: #F0F8FF;

  --pagination-active-background-color: #f17b00;
  --pagination-active-border-color: var(--pagination-border-color);
  --pagination-active-color: #F0F8FF;

  --pagination-active-hover-background-color: #743c00;
  --pagination-active-hover-border-color: var(--pagination-border-color);
  --pagination-active-hover-color: #F0F8FF;
  
  --pagination-display-disabled: none; /* block or none */

  /* One width for the whole page shell: the navbar, the header image and the content wrapper
     all key off this, instead of the three different widths (1320 / 1200 / 1000) they used to
     have. Set to 1000px to match the width the page cards themselves use — users, profile,
     coins reports and bonuses are all 1000 — so the logo and the menu line up with the card
     rather than floating wider than it. Individual pages are untouched. */
  --site-width: 1000px;
  
  
  
}

/* Bootstrap's .container steps through 540/720/960/1140/1320px, so the navbar sat wider than
   everything below it. The +24px covers the container's own 12px gutters, making its content
   box exactly --site-width. */
.container{
  max-width: calc(var(--site-width) + 24px);
}

body {
    /* background: #fafafa; */
    /* color: #333333; */
    background: var(--page-background-color);
    color: white;
    /* margin-top: 5rem; */
    /* background-image: url('/static/overtuning/images/background_img.jpg'); */
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Calibri','Times New Roman', Times, serif;
    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);color: rgb(81, 5, 113);
    /* background-image: url("/agency/get/files/NSS_logo_pc/"); */
  
  }

  #photoview {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  #photoview.photoview-visible {
    display: flex;
    opacity: 1;
  }

  .photoview-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 92vw;
    max-height: 92vh;
    animation: photoview-scale-in 0.25s ease;
  }

  @keyframes photoview-scale-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }

  #photoview-img {
    max-width: 88vw;
    max-height: 82vh;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    object-fit: contain;
    display: block;
  }

  .photoview-toolbar {
    margin-top: 12px;
  }

  .photoview-toolbar a {
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.15s;
  }

  .photoview-toolbar a:hover {
    color: #fff;
  }

  .photoview-close {
    position: fixed;
    top: 18px;
    right: 22px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
  }

  .photoview-close:hover {
    background: rgba(255,255,255,0.28);
    transform: scale(1.1);
  }

  .photoview-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 36px;
    line-height: 1;
    width: 50px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
  }

  .photoview-nav:hover {
    background: rgba(255,255,255,0.28);
  }

  .photoview-nav-prev { left: 14px; }
  .photoview-nav-next { right: 14px; }

  .photoview-nav.photoview-nav-hidden {
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width: 600px) {
    .photoview-nav { width: 36px; height: 48px; font-size: 26px; }
    .photoview-nav-prev { left: 6px; }
    .photoview-nav-next { right: 6px; }
  }
  .agency-data-flex-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /*space-around*/
    align-items: flex-start;
    width: 100%;
  }
  
  .photosPage > div {
    padding: 10px;
  }

  #agency-menu-item-title{
    display: block;
  }

  #agency-menu{
    display: block;
  }

  #prevMenuDiv{
    display: none;
  }
  #nextMenuDiv{
    display: none;
  }

  #menu-toggle-button{
    display: none;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 100;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 14px rgba(168,85,247,0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .mobile-menu-wrap{
    padding: 10px;
    z-index: 2000;
    position: fixed;
    top: 5px;
    left:5px;
    width: 50%;
  }
  .mobile-menu-toggle-btn{
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 14px rgba(168,85,247,0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .mobile-menu-panel{
    margin-top: 12px;
  }
  .mobile-menu-group{
    margin-bottom: 8px;
  }
  .mobile-menu-subgroup{
    padding-left: 16px;
    margin-top: 6px;
  }
  .mobile-menu-subitem{
    margin-bottom: 6px;
  }
  .mobile-menu-chevron{
    display: inline-block;
    margin-left: 4px;
    opacity: 0.8;
  }
  .agency-menu{
    margin-top: 30px;
    width: 250px;
  }
  .agency-menu-item{
    padding: 2px;
    /* background-color: pink; */
    text-align: center;
    margin: 5px;
    /* font-weight: bold; */
    /* border: 5px  gold; */
    /* border-style: groove; */
  }
  /* .agency-menu-item:hover{
    background-color: red;
  } */
  #agency-menu-item-title-small-screen{
    display: none;
  }

  #page-items{
    width: 100px;
  }

  .agency-menu-button {
    width: 100%;
    display: inline-block;
    padding: 18px 35px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 14px rgba(168,85,247,0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  
  .agency-menu-button:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 18px rgba(168,85,247,0.4);
  }
  
  .agency-menu-button:active {
    transform: translateY(0);
  }

  /* This used to be `margin-left: 50px; width: 75%` — space reserved for the pink sidebar menu
     that sat to its left. The menu is gone, so the content was left pinned to the left of the
     page with 200-320px of dead space on the right, while the header stayed centred. Capped at
     the same 1200px as the header image so the two share exactly the same left/right edges. */
  .agency-content{
    width: 100%;
    max-width: var(--site-width);
    margin-left: auto;
    margin-right: auto;
    font-size: large;
    /* color: rgb(81, 5, 113); */
  }

  .agency-content .emojione {
    width: 20px;
  }

  .mainAgencyTitle{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
     /*space-around*/
    /* align-items: baseline; */
    width: 100%;
    text-align: center;
    /* background-color: #C96A82; */
    /* background-color: #B85773; */
  }

  .mainAgencyTitle img{
    max-width: var(--site-width);
  }

  .mainAgencyTitle_logo{
    width: 150px;
  }

  .mainAgencyTitle_title{
    margin-left: 50px;
    font-weight: bolder;
    font-size: xx-large;
  }

  @media (min-width: 761px){
    .mediaViewer{
      text-align: center;
      margin-top: 50px;
      display: flex;
      flex-wrap: wrap;
    }
    .mediaViewer-media{
      flex-basis: 70%;
    }
    .mediaViewer-comments{
      margin-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
      flex-basis: 30%;
      max-height: 90vh;
      overflow-y: scroll;
    }
  }

  @media (max-width: 1080px){
    /* no fixed margin-left: it would beat the auto-centring above and shove the content
       left again. .container already supplies the side padding. */
    .agency-content{
      font-size: large;
      max-width: 100%;
      /* color: rgb(81, 5, 113); */
    }
    .mediaViewer{
      text-align: center;
      margin-top: 50px;
    }
    .mediaViewer-media{
      text-align: center;      
    }
    .mediaViewer-comments{
      position: relative;
      margin-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
      background-color: black;
    }

    .agency-menu-button {
      width: 100%;
      display: inline-block;
      padding: 10px 20px;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
      border: none;
      border-radius: 50px;
      box-shadow: 0px 4px 14px rgba(168,85,247,0.4);
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }
    
    .agency-menu-button:hover {
      transform: translateY(-2px);
      box-shadow: 0px 6px 18px rgba(168,85,247,0.4);
    }
    
    .agency-menu-button:active {
      transform: translateY(0);
    }
  }
  
  @media (max-width: 800px){
    #prevMenuDiv{
      display: block;
    }
    #nextMenuDiv{
      display: block;
    }
    #agency-menu-item-title{
      display: none;
    }
    #agency-menu-item-title-small-screen{
      display: block;
      position: absolute;
      top: 5px;
      right: 10px;
    }

    .agency-menu{
      margin-top: 30px;
      width: 150px;
      position: absolute;
    }
    #agency-menu{
      display: none;
      position: fixed;
      top: 20px;
      left: 20px;
    }
    #menu-toggle-button{
      display: block;
      position: fixed;
      top: 5px;
      left: 10px;
    }
    .agency-content{
      font-size: large;
      width: 100%;
      /* color: rgb(81, 5, 113); */
    }
    .mediaViewer{
      text-align: center;
      margin-top: 50px;
    }
    .mediaViewer-media{
      text-align: center;      
    }
    .mediaViewer-comments{
      position: relative;
      margin-top: 10px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: left;
      background-color: black;
    }
    .agency-menu-button {
      width: 100%;
      display: inline-block;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 400;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
      border: none;
      border-radius: 50px;
      box-shadow: 0px 2px 10px rgba(168,85,247,0.4);
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }
    
    .agency-menu-button:hover {
      transform: translateY(-2px);
      box-shadow: 0px 6px 18px rgba(168,85,247,0.4);
    }
    
    .agency-menu-button:active {
      transform: translateY(0);
    }
  }

  

  .mediaViewer{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: black;
    overflow: scroll;
  }

  /* .addUserCommentButton:active:not(:hover) */
  .addUserCommentButton, .addUserCommentButton:focus{ 
    background-color: #604444;
    border: 4px solid #604444;
    color: white;
    margin-bottom: 15px;
  }
  
  /* .addUserCommentButton:focus{
    background-color: #4d4d4d;
    border: 4px solid black;
    color: white;
  } */
  

  .addUserCommentButton:hover,
  .addUserCommentButton:hover:active,
  .addUserCommentButton:focus:hover,
  .addUserCommentButton:active:not(:hover){
    border: 4px solid #935252;
    color: white;
    background-color: #935252;
  }

  /* .addUserCommentButton:hover, .addUserCommentButton:hover:focus:active, .addUserCommentButton:focus:hover{
    background-color: #4d4d4d;
    border: 4px solid #4d4d4d;
    color: white;
  }
  .addUserCommentButton:focus{
    border: 4px solid rgb(85, 81, 81);
    color: white;
    background-color: black;
  } */

  .pointer-on-hover:hover{
    cursor: pointer;
  }

  .no-text-decoration{
    text-decoration: none;
    color: inherit;
  }

  .userComment-title{
    margin-top: 5px;
    width: 100%;
    background-color: #604444;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .userComment-title  a{
    color: white;
  }

  .userComment-message{
    width: 100%;
    background-color: #171831;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: small;
    border-radius: 20px;
  }

  #imageView-title{
    color: rgb(81, 5, 113);
    text-align: left;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    font-weight: bold;
  }

  #imageView-description{
    margin-top: 4px;
    color: rgb(81, 5, 113);
    text-align: left;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    font-size: small;
  }

  /* Grid rather than flex: the label column can cap at 240px but still shrink, and the value
     column is guaranteed the remaining space. The old flex version gave the label a fixed
     260px basis, so in a narrow container (e.g. ~870px viewport, where the avatar column and
     page padding eat most of the width) the value was left ~110px and short strings like
     "Not set" or the masked password wrapped onto two lines. */
  .user-profile-info{
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
    grid-template-areas: "label value btn";
    align-items: center;
    gap: 4px 14px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(192, 96, 144, 0.4);
  }

  .user-profile-info:last-of-type {
    border-bottom: none;
  }

  .user-profile-info-label{
    grid-area: label;
    border-right: white;
    color: rgba(81, 5, 113, 0.8);
    font-size: 0.9em;
  }

  .user-profile-info-content{
    grid-area: value;
    min-width: 0;
    word-break: break-word;
  }

  /* A field with no value yet renders an empty content div — show a muted "Not set" so the
     row doesn't read as broken or half-loaded. Done in CSS rather than the template so it
     also kicks in when an inline edit clears the value via JS. */
  .user-profile-info-content:empty::before{
    content: "Not set";
    color: rgba(81, 5, 113, 0.4);
    font-style: italic;
    white-space: nowrap;   /* never break "Not set" across two lines */
  }

  /* Round pencil button at the right end of an editable row. Replaces the old inline
     "(Change)" links, which were x-small underlined text crammed into the label — too small
     to tap reliably and visually noisy once every row has one. */
  .profile-edit-btn{
    grid-area: btn;
    justify-self: end;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(192, 96, 144, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    color: rgb(81, 5, 113);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }

  .profile-edit-btn:hover,
  .profile-edit-btn:focus-visible{
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    color: #fff;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
    outline: none;
  }

  .profile-edit-btn:active{
    transform: scale(0.94);
  }

  /* Update / Cancel shown while a row is being edited. Replaces the old <u>Update</u> /
     <u>Cancel</u> text spans — same pill language as the rest of the site, and a real
     tap target instead of underlined small text. */
  .profile-action-btn{
    display: inline-block;
    margin: 4px 0 0 6px;
    padding: 6px 16px;
    min-height: 32px;
    border: 1px solid rgba(192, 96, 144, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: rgb(81, 5, 113);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  }

  .profile-action-btn:hover,
  .profile-action-btn:focus-visible{
    background: rgba(255, 255, 255, 0.9);
    outline: none;
  }

  .profile-action-btn:active{
    transform: scale(0.97);
  }

  .profile-action-primary{
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    border-color: transparent;
    color: #fff;
  }

  .profile-action-primary:hover,
  .profile-action-primary:focus-visible{
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
  }

  /* ---------------------------------------------------------------- account nav item */

  .account-nav-link{
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  /* Only the slim navbar needs capping. The mobile menu button is a full-width pill
     (.agency-menu-button is width:100%), so a max-width here would shrink it. */
  .nav-link.account-nav-link{
    max-width: 190px;
  }

  .agency-menu-button.account-nav-link{
    width: 100%;
  }

  /* pushes the ▾ to the far edge of the mobile pill, where it was before */
  .agency-menu-button.account-nav-link .mobile-menu-chevron{
    margin-left: auto;
  }

  .account-nav-avatar{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;          /* the name truncates, the avatar never squashes */
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.5);
  }

  .account-nav-avatar-blank{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;   /* purple in the navbar, white on the mobile gradient pill */
  }

  /* The server already trims very long usernames; this is what actually adapts to the width
     available, so the account item can never push the rest of the navbar around. */
  .account-nav-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  @media (max-width: 380px){
    .nav-link.account-nav-link{ max-width: 150px; }
  }

  /* Shown in place of the profile fields when a private account is viewed by someone who
     has not been let in. */
  .profile-private-note{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 4px;
    color: rgba(81, 5, 113, 0.85);
    font-size: 14px;
  }

  .profile-private-note svg{
    flex: none;
    opacity: 0.7;
  }

  /* ---------------------------------------------------------------- online status */

  .profile-status{
    margin-bottom: 10px;
  }

  .profile-status-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(192, 96, 144, 0.35);
    font-size: 12px;
    font-weight: 600;
    color: rgb(81, 5, 113);
    white-space: nowrap;
  }

  .profile-status-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;   /* the offline default; the modifiers below override it */
    flex: none;
  }

  /* Colour lives on the dot, not the text. The old markup coloured the words green/yellow/red
     inline, and yellow on this background was effectively unreadable. */
  .profile-status-online .profile-status-dot{ background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
  .profile-status-away .profile-status-dot{ background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
  .profile-status-offline .profile-status-dot{ background: #9ca3af; }

  .profile-status-seen,
  .profile-status-note{
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.35;
  }

  .profile-status-choices{
    display: flex;
    margin-top: 8px;
    border: 1px solid rgba(192, 96, 144, 0.4);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
  }

  .profile-status-choice{
    flex: 1;
    padding: 5px 4px;
    min-height: 30px;
    border: none;
    background: transparent;
    color: rgb(81, 5, 113);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .profile-status-choice + .profile-status-choice{
    border-left: 1px solid rgba(192, 96, 144, 0.3);
  }

  .profile-status-choice:hover{
    background: rgba(168, 85, 247, 0.12);
  }

  .profile-status-choice.is-selected{
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    color: #fff;
  }

  /* ---------------------------------------------------------------- profile picture */

  .profile-avatar-wrap{
    position: relative;
    width: 104px;
    height: 104px;
    margin-bottom: 10px;
  }

  .profile-avatar{
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(81, 5, 113, 0.25);
    transition: box-shadow 0.15s ease, filter 0.15s ease;
  }

  .profile-avatar.pointer-on-hover:hover{
    filter: brightness(1.05);
    box-shadow: 0 3px 14px rgba(168, 85, 247, 0.5);
  }

  /* A camera badge instead of a hover overlay: hover states do not exist on a phone,
     and most of these users are on one. 34px keeps it a real tap target. */
  .profile-avatar-btn{
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(81, 5, 113, 0.35);
    transition: filter 0.15s ease, transform 0.15s ease;
  }

  .profile-avatar-btn:hover,
  .profile-avatar-btn:focus-visible{
    filter: brightness(1.1);
    outline: none;
  }

  .profile-avatar-btn:active{
    transform: scale(0.94);
  }

  .profile-pic-modal{
    position: fixed;
    inset: 0;
    z-index: 1050;
    /* display is toggled between none and flex by handleVisibility() */
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(30, 5, 45, 0.55);
    backdrop-filter: blur(2px);
  }

  .profile-pic-panel{
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;   /* otherwise a scrollbar gutter is reserved along the bottom */
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }

  .profile-pic-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 600;
    color: rgb(81, 5, 113);
  }

  .profile-pic-close{
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .profile-pic-close:hover{
    background: rgba(0, 0, 0, 0.06);
    color: #111;
  }

  .profile-pic-body{
    position: relative;   /* keeps the visually-hidden file input scoped to this panel */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px;
  }

  /* The circle is both the preview and the crop viewport. touch-action:none is what stops
     a drag on a phone scrolling the page instead of moving the photo. */
  .profile-pic-crop{
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f3f4f6;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(81, 5, 113, 0.22);
    margin-bottom: 12px;
    touch-action: none;
    user-select: none;
  }

  .profile-pic-crop img{
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;      /* the img is sized in JS; a responsive rule here would fight it */
    pointer-events: none;
    user-select: none;
  }

  /* before a file is picked there is nothing to drag, so it just shows the current picture */
  .profile-pic-crop:not(.is-croppable) img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-pic-crop.is-croppable{
    cursor: grab;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.35), 0 2px 12px rgba(81, 5, 113, 0.22);
  }

  .profile-pic-crop.is-dragging{
    cursor: grabbing;
  }

  .profile-pic-zoom{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 220px;
    margin-bottom: 6px;
  }

  .profile-pic-zoom input[type="range"]{
    flex: 1;
    accent-color: #a855f7;
    cursor: pointer;
  }

  .profile-pic-zoom-icon{
    color: #6b7280;
    font-size: 15px;
    line-height: 1;
    width: 12px;
    text-align: center;
  }

  .profile-pic-crop-hint{
    margin-bottom: 10px;
    font-size: 12px;
    color: #6b7280;
  }

  /* The native file input is unstyleable, so it is hidden and this label drives it. */
  .profile-pic-input{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
  }

  .profile-pic-drop{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 16px 12px;
    border: 2px dashed rgba(168, 85, 247, 0.45);
    border-radius: 14px;
    background: rgba(168, 85, 247, 0.05);
    color: rgb(81, 5, 113);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .profile-pic-drop:hover,
  .profile-pic-input:focus-visible + .profile-pic-drop{
    background: rgba(168, 85, 247, 0.11);
    border-color: rgba(168, 85, 247, 0.75);
  }

  .profile-pic-drop.is-dragging{
    background: rgba(168, 85, 247, 0.16);
    border-color: rgba(168, 85, 247, 0.9);
  }

  .profile-pic-drop.has-file{
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.6);
    background: rgba(34, 197, 94, 0.08);
  }

  .profile-pic-drop-main{
    font-weight: 600;
    font-size: 14px;
  }

  .profile-pic-drop-sub{
    font-size: 12px;
    color: #6b7280;
    word-break: break-word;
  }

  .profile-pic-hint{
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
  }

  .profile-pic-error{
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    font-size: 13px;
    text-align: center;
  }

  .profile-pic-actions{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
  }

  .profile-pic-actions .profile-action-btn{
    margin: 0;
  }

  .profile-action-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
  }

  .profile-pic-remove{
    padding: 0 18px 16px;
    text-align: center;
  }

  .profile-pic-remove-btn{
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .profile-pic-remove-btn:hover{
    background: rgba(239, 68, 68, 0.08);
  }

  /* The password row stacks three inputs, which needs an actual flex container — the
     inline flex-direction it used to carry did nothing on a non-flex div. */
  .user-profile-info-content.profile-stacked{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Notification tick-boxes. The whole label is clickable, so the tap target is the text
     row rather than just the 18px box. */
  .profile-check{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    cursor: pointer;
    color: rgb(81, 5, 113);
  }

  .profile-check input[type="checkbox"]{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #a855f7;
    cursor: pointer;
  }

  .profile-check input[type="checkbox"]:disabled{
    cursor: progress;
  }

  .profile-check-status{
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(81, 5, 113, 0.6);
  }

  /* ---- VJ reports section (weekly earnings chart + table) ---- */
  .vj-chart-wrap{
    padding: 12px 12px 6px;
    background: rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(192, 96, 144, 0.4);
  }

  .vj-chart-title{
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(81, 5, 113, 0.8);
    margin-bottom: 8px;
  }

  /* height:auto keeps the aspect ratio, which the axis text needs — a stretched viewBox
     would squash the labels horizontally. */
  .vj-chart{
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    overflow: visible;
  }

  .vj-chart-axis{
    stroke: rgba(81, 5, 113, 0.45);
    stroke-width: 1;
  }

  .vj-chart-grid{
    stroke: rgba(81, 5, 113, 0.13);
    stroke-width: 1;
  }

  .vj-chart-ylabel{
    fill: rgba(81, 5, 113, 0.7);
    font-size: 11px;
    text-anchor: end;
  }

  .vj-chart-xlabel{
    fill: rgba(81, 5, 113, 0.55);
    font-size: 11px;
  }

  .vj-chart-bar{
    fill: #a855f7;
    opacity: 0.75;
    transition: opacity 0.15s ease;
  }

  .vj-chart-bar:hover{ opacity: 1; }

  .vj-chart-bar-peak{
    fill: #ec4899;
    opacity: 0.95;
  }

  .vj-week-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .vj-week-table th{
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(81, 5, 113, 0.7);
    border-bottom: 1px solid rgba(192, 96, 144, 0.4);
    white-space: nowrap;
  }

  .vj-week-table td{
    padding: 7px 12px;
    color: rgb(81, 5, 113);
    border-bottom: 1px solid rgba(192, 96, 144, 0.2);
    white-space: nowrap;
  }

  .vj-week-table tr:last-child td{ border-bottom: none; }

  .vj-week-total{ font-weight: 700; }

  /* ---- in-app notifications: badges, bell, and the notifications page ---- */
  .notif-badge{
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
  }

  .notif-bell{ font-size: 15px; }

  /* "Something is waiting" on the collapsed ☰ Menu button: a dot on the corner plus a soft
     pulse of the button's own glow. No number and no second element — the button is already
     a gradient pill, and a second pill beside it both competed with it and implied a count
     the user couldn't interpret. The dot is an ::after, so toggleMobileMenu() rewriting the
     button's innerHTML can't remove it. Counts live inside the panel, per item. */
  .mobile-menu-toggle-btn.has-notifications{
    position: relative;
    overflow: visible;
    animation: mobileMenuPulse 2.2s ease-in-out infinite;
  }

  .mobile-menu-toggle-btn.has-notifications::after{
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff3b6b;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }

  @keyframes mobileMenuPulse{
    0%, 100% { box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4); }
    50%      { box-shadow: 0 4px 20px rgba(255, 59, 107, 0.65); }
  }

  /* Anyone who has asked their device for less motion just gets the dot. */
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu-toggle-btn.has-notifications{ animation: none; }
  }

  .notif-wrap{ max-width: 760px; margin: 0 auto; padding: 10px 0 40px; }

  .notif-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }

  .notif-header h4{ color: rgb(81, 5, 113); margin: 0; }

  .notif-new-pill{
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  .notif-list{
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 10px rgba(81, 5, 113, 0.08);
  }

  .notif-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.28);
    border-bottom: 1px solid rgba(192, 96, 144, 0.3);
  }

  .notif-item:last-child{ border-bottom: none; }

  /* An unseen row is marked with a coloured left edge rather than a different background,
     so it still reads as part of the same list. */
  .notif-item-unseen{
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 3px 0 0 #a855f7;
  }

  .notif-item-main{ flex: 1; min-width: 0; }

  .notif-item-message{
    color: rgb(81, 5, 113);
    font-size: 14px;
    word-break: break-word;
  }

  .notif-item-meta{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 11px;
    color: rgba(81, 5, 113, 0.55);
  }

  .notif-app-tag{
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
  }

  .notif-item-link{
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(192, 96, 144, 0.45);
    color: rgb(81, 5, 113);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }

  .notif-item-link:hover{
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    border-color: transparent;
    color: #fff;
    text-decoration: none;
  }

  .notif-empty{
    padding: 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.28);
    color: rgba(81, 5, 113, 0.6);
    font-size: 14px;
  }

  /* Collapsible profile sections (Account / Contact / TIMO / Bank details / ...) — the
     header is tap-to-toggle, so it works the same on touch and with a mouse. The rows
     inside keep their original edit/view twins driven by handleVisibility(), which
     targets individual row ids and is unaffected by the group wrapper around them. */
  .profile-group{
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(192, 96, 144, 0.35);
    box-shadow: 0 2px 8px rgba(81, 5, 113, 0.08);
  }

  .profile-group-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    color: rgb(81, 5, 113);
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.15s ease;
  }

  .profile-group-header:hover{
    background: rgba(255, 255, 255, 0.6);
  }

  .profile-group.open .profile-group-header{
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    color: #fff;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
  }

  .profile-group-chevron{
    /* inline-block is required: CSS transforms are ignored on non-replaced inline
       elements, so a bare <span> would never rotate */
    display: inline-block;
    font-size: 0.85em;
    transition: transform 0.2s ease;
  }

  .profile-group.open .profile-group-chevron{
    transform: rotate(180deg);
  }

  .profile-group-body{
    display: none;
  }

  .profile-group.open .profile-group-body{
    display: block;
  }

  /* Stack label above value once a side-by-side pair would get cramped. The threshold is
     920px rather than a phone width because this content sits in a column narrowed by the
     avatar sidebar and page padding — at ~870px the two-column form was already squeezing
     values onto two lines. The pencil moves to its own column spanning both rows. */
  @media (max-width: 920px) {
    .user-profile-info{
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "label btn"
        "value btn";
      gap: 2px 10px;
    }
    .user-profile-info-label{
      font-size: 0.8em;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
  }

  /* .user-profile-info textarea{
    margin-left: 20px;
  } */

  /* .user-profile-info input{
    margin-left: 20px;
  } */
  
  h1, h2, h3, h4, h5, h6 {
    /* color: #444444; */
  }
  
  ul {
    margin: 0;
  }
  
  .bg-steel {
    /* background-color: #5f788a; */
    background-color: #191a01;
  }

  .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid rgba(81,5,113,0.15);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(81,5,113,0.18);
    padding: 6px;
  }

  .site-header .navbar-nav .nav-link {
    color: rgb(81,5,113);
    margin-left: 10px;
    border-radius: 999px;
    padding: 6px 14px;
  }

  .site-header .navbar-nav  .nav-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  }

  .site-header .navbar-nav .nav-link.active {
    font-weight: 500;
  }

  .navbar-nav .dropdown-menu .nav-link {
    margin-right: 5px;
    margin-left: 5px;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: transparent;
    color: rgb(81,5,113);
  }

  .navbar-nav .dropdown-menu .nav-link:hover {
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    color: #ffffff;
  }

  .second-navbar{
    margin-top: -20px;
    margin-bottom: 20px;
  }
  
  .content-section {
    background: #ffffff;
    padding: 10px 20px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin-bottom: 20px;
  }
  
  .article-title {
    color: #444444;
  }
  
  a.article-title:hover {
    color: #428bca;
    text-decoration: none;
  }
  
  .article-content {
    white-space: pre-line;
  }
  
  .article-img {
    height: 65px;
    width: 65px;
    margin-right: 16px;
  }
  
  .article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3
  }
  
  .article-metadata a:hover {
    color: #333;
    text-decoration: none;
  }
  
  .article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }
  
  .account-img {
    height: 125px;
    width: 125px;
    margin-right: 20px;
    margin-bottom: 16px;
  }
  
  .account-heading {
    font-size: 2.5rem;
  }


  .tuning-labels {
    font-weight: bold;
  }

  .tuning-background-color1 {
    background-color: red;
  }

  .tuning-background-color2 {
    background-color: crimson;
  }

.pagination>li>a,
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>a:active {
  background-color: var(--pagination-background-color);
  border-color: var(--pagination-border-color);
  color: var(--pagination-color);
  box-shadow: none;
}

.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
  background-color: var(--pagination-background-color);
  border-color: var(--pagination-border-color);
  color: var(--pagination-color);
  display: var(--pagination-display-disabled);
}

.pagination>li>div,
.pagination>li>div:hover,
.pagination>li>div:focus {
  background-color: var(--pagination-background-color);
  border-color: var(--pagination-border-color);
  color: var(--pagination-color);
  cursor: default;
}

.pagination>.active>a,
.pagination>.active>a:focus {
  background-color: var(--pagination-active-background-color);
  border-color: var(--pagination-active-border-color);
  color: var(--pagination-active-color);
}

.pagination>.active>a:hover {
  background-color: var(--pagination-active-hover-background-color);
  border-color: var(--pagination-active-hover-border-color);
  color: var(--pagination-active-hover-color);
}


/* .curUserMessage {
  float: right;
  clear: both;
}

.receipientUserMessage {
  float: left;
  clear: both;
} */

.curUserMessage {
  margin-top: 5px;
  text-align: left;
  float: right;
  clear: both;
  /* display: block; */
  background-color: #428bca;
  color: white;
  border: #428bca;
  border-style: solid;
  border-radius: 20px;
  margin-right: 1%;
  max-width: 60%;
  min-width: 40%;
  padding: 5px;
  z-index: 2;

  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
}

.emoticonImage{
  width: 16px;
  height: 16px;
  margin-bottom: 4px;
}

.directMessage-message-deleted {
  background-color: var(--btnColor1);
  font-weight: bold;
  font-size: small;
  padding: 5px;
  width: 100%;
  text-align: center;
  border-radius: 10px;

}

.directMessage-message > img:not(.emoticonImage) {
  width: 100%;
}

.directMessage-message > iframe {
  width: 100%;
}

.directMessage-message blockquote {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-style: normal;
  font-size: small;
  border: 0.5px red solid;
  border-radius: 5px;
  background-color: green;
  max-height: 120px;
  overflow-y: hidden;
}

.directMessage-message blockquote blockquote:not(:first-child) {
  margin-left: 15px;
  margin-right: 15px;
  max-height: 50px;
  visibility: visible;
}

/* .directMessage-actions-rec, directMessage-actions-rec{
  display: block;
  position: relative;
  height: 0;
  top: -20px;
  left: -200px;
  
} */

.message-actions-container{
  height: 16px;
  flex-basis: 5%;
  justify-items: left;
}

.messages-reply-img{
  height: 15px;
}

.messages-reply-img:hover {
  cursor: pointer;
  width: 15px;
}

.receipientUserMessage {
  margin-top: 5px;
  text-align: left;
  float: left;
  clear: both;
  display: block;
  background-color: #428bca;
  color: white;
  border: #428bca;
  border-style: solid;
  border-radius: 20px;
  margin-left: 1%;
  max-width: 60%;
  min-width: 40%;
  padding: 5px;
  z-index: 2;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* .directMessage-actions-rec {
  float: left;
  margin-left: 10px;
  
}

.directMessage-actions-cur {
  float: right;
  margin-right: 10px;
  vertical-align: bottom;
} */

.directMessage-message{
  /* font-family: Garamond, serif; */
  /* font-family: 'Calibri', Georgia, serif; */
  font-family: 'Calibri','Times New Roman', Times, serif;
  font-size: medium;
  display: block;
  margin-bottom: 5px;
  word-wrap: break-word;
  /* max-width: 80%; */
  flex-basis: 90%;
  /* overflow-x: scroll; */
}

.emojis-span{
  /* font-size: x-large; */
  font-size: x-large;
}

/* .directMessage-message:target {
  border: 5px solid pink;
} */

.directMessage-message:tran{
  border: 5px solid red;
}

.directMessage-time{
  display: block;
  border-top: wheat solid 1px;
  font-size: x-small;
}

#quoteArea-message blockquote a{
  color: antiquewhite;
  text-decoration: none;
  /* text-decoration: underline; */
}

.chatArea {
  padding-top: 34px;
  padding-bottom: 15px;
  background-color: #333333;
  max-height: 500px;
  overflow-y: scroll;
}

.chatArea a {
  color: antiquewhite;
  /* text-decoration: none; */
  text-decoration: underline;
}

.chatsList {
  margin: 0;
  padding: 0;
}

.chatsList > li {
  padding: 5px;
  margin-bottom: 3px;
  list-style: none;
  border-radius: 10px;
  background-color: var(--btnColor1);  
}

.chatsList > li > a {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.chatsListName {
  font-size: larger;
  font-weight: bolder;
  color: white;
  flex-basis: 90%;
}

.chatsListTime {
  /* display is defined in html file */
  color: red;
  flex-basis: 100%;
}

.chatsListUnread {
  text-align: right;
  color: white;
  width: 100%;
  flex-basis: 10%;
  background-color: red;
  border-radius: 100%;
  text-align: center;
}


#messageArea {
  flex-basis: 90%;
  width: 100%;
}
.forumMessage {
  background-color: rgb(34, 32, 34);
  border: 2px solid red;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  border-radius: 20px;
  margin-bottom:5px;
}

.reaction-inactive{
  background-color: #f17b00;
}

.reaction-selected {
  background-color: #428bca;
}
.reaction-active {
  background-color: #191a01;
}

.emojisListClass-items{
  --btnColor1: #428bca;
  --btnColor2: red;
  border-radius: 10%;
  font-size: xx-large;
  /* margin: 1px; */
}

#emojisList{
  /* width: 120px; */
  /* background-color: black; */
  /* text-align: center; */
  /* padding: 3px; */
  position: absolute;
}


.mybtn, .mybtn:focus{ 
  background-color: var(--btnColor1);
  border: var(--btnBorderSize);
  border-color: var(--btnColor1);
  color: var(--btnColorText);
}

.mybtn:hover,
.mybtn:hover:active,
.mybtn:focus:hover,
.mybtn:active:not(:hover){
  background-color: var(--btnColor2);
  border: var(--btnBorderSize);
  border-color: var(--btnColor2);
  color: var(--btnColorText);
}


/* Confirmation / alert dialog. Was three stacked brown blocks (--btnColor1/2 are #604444 and
   #935252) floating at width:60%;left:20% with no backdrop, and both buttons forced green.
   Now a centred card on a dimmed backdrop, matching the profile dialogs. */
.site-alert{
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* display is toggled by handleVisibility(): "" falls back to this flex, "none" hides it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(30, 5, 45, 0.55);
  backdrop-filter: blur(2px);
}

.site-alert-panel{
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  text-align: left;
}

.alertTitle{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 16px;
  font-weight: 600;
  color: rgb(81, 5, 113);
}

.alertMessage {
  padding: 16px 18px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

.alertButtons{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px 16px;
}

/* The buttons are built in JS with class "btn mybtn", so they are restyled here rather than
   there. First child is the confirming action (Yes / Ok), second is Cancel. */
.alertButtons > button,
.alertButtons > button.mybtn,
.alertButtons > button.mybtn:focus{
  margin: 0;
  padding: 7px 18px;
  min-height: 34px;
  border: 1px solid rgba(192, 96, 144, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: rgb(81, 5, 113);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.alertButtons > button:first-child,
.alertButtons > button.mybtn:first-child,
.alertButtons > button.mybtn:first-child:focus{
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  border-color: transparent;
  color: #fff;
}

.alertButtons > button:first-child:hover,
.alertButtons > button.mybtn:first-child:hover{
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  filter: brightness(1.08);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

.alertButtons > button:not(:first-child):hover,
.alertButtons > button.mybtn:not(:first-child):hover{
  background: rgba(255, 255, 255, 0.95);
  color: rgb(81, 5, 113);
  border-color: rgba(192, 96, 144, 0.45);
}

.alertButtons > button:active{
  transform: scale(0.97);
}

.direct-message-image-attached-container{
  height: 100px;
}
.curUserMessage .direct-message-image-attached-container{
  text-align: right;
}

.direct-message-image-attached{
  /* max-height: 100%; */
  max-height: 100%;
  max-width: 100%;
}

.user-search-area{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.userOnlineStatus{
  font-size: small;
  font-weight: bold;
  display: inline;
}


#notification-messages-users-received{
  display: inline;
}

#notification-messages-users-received a{
  color: white;
}

#newMessages-notifications-mainpage{
  display: none;
  border: 1 px solid red;
  margin-bottom: 10px;
}

#newForumThreads-notifications-mainpage{
  display: none;
  border: 1 px solid red;
  margin-bottom: 10px;
}

.notification-received-title{
  width: 100%;
  background-color: black;
  text-align: left;
  padding-left: 3px;
  padding-right: 3px;
}

.notification-received-content{
  width: 100%;
  background-color: green;
  text-align: left;
  padding-left: 3px;
  padding-right: 3px;
}

#direct-messages-receipientUsername{
  flex-basis: 50%; padding-left: 10px; background-image: linear-gradient(90deg, #428bca, var(--page-background-color)); border-radius: 20px;
}

#direct-messages-curUserUsername{
  flex-basis: 50%; text-align: right; padding-right: 10px; background-image: linear-gradient(90deg, var(--page-background-color), #428bca); border-radius: 20px;
}


.forum_folders{
  margin-bottom: 5px;
}

.forum_folder{
  background-color: rgb(65, 11, 50);
  border: 2px solid blue;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  border-radius: 20px;
}

.forum_threads{
  margin-bottom: 5px;
}

.forum_thread{
  background-color: rgb(31, 31, 1); border: 2px solid red; padding-top: 5px; padding-bottom: 5px; width: 100%; border-radius: 20px;
}

/* ---------------------------------------------------------------------------------------------
   The small-screen menu keeps its own layout - the pills, where they always were. All that was
   missing is something behind them: with the page showing through, the menu was unreadable.

   Written for max-width 991.98px, where the toggle button appears (Bootstrap's d-lg-none); the
   menu's other rules live in a max-width: 600px block, so between 600 and 992 there was nothing.
--------------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1900;            /* under the menu, over everything else */
    background: rgba(20, 4, 40, 0.72);
    backdrop-filter: blur(2px);
  }

  /* The backdrop lives inside the menu wrapper, and a positioned element paints above static
     siblings whatever their order - so without these it covered the menu it was meant to sit
     behind, and the X Close button with it: the menu opened and could not be closed. */
  #mobile-menu-toggle, #mobile-menu-panel {
    position: relative;
    z-index: 1950;
  }

  /* However long the menu grows, all of it can be reached - it used to run off the screen with
     no way to scroll, because the wrapper is fixed. */
  #mobile-menu-panel {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
  }

  body.mobile-menu-open { overflow: hidden; }   /* the page behind must not scroll with it */
}