/* =========================================================
   Base
========================================================= */
.gpud-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 14px;
  box-sizing: border-box;
}

.gpud-grid{
  display: grid;
  grid-template-columns: 1fr 340px; /* content | menu */
  gap: 20px;
  align-items: flex-start;
}

/* always menu on the right */
.gpud-content{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 20px;
  min-height: 420px;
}

.gpud-menu{
  position: sticky;
  top: 20px;
}

/* Force column order always: content left, menu right */
.gpud-content{ order: 1; }
.gpud-menu{ order: 2; }

@media (max-width: 900px){
  .gpud-content{ order: 1; }
  .gpud-menu{ order: 2; }
}

[dir="rtl"] .gpud-grid{
  direction: ltr; /* keeps grid column order stable */
}
[dir="rtl"] .gpud-content,
[dir="rtl"] .gpud-menu{
  direction: rtl; /* restores text direction inside */
}

/* =========================================================
   Profile (TOP – NO background)
========================================================= */
.gpud-profile-topcard{
  padding: 14px;
  margin-bottom: 14px;
}

.gpud-profile-top{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
}

.gpud-avatar{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.gpud-avatar-actions{
  display: grid;
  gap: 8px;
}

.gpud-lang{
  margin-top: 12px;
}

#gpud-lang-select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 14px;
}

/* =========================================================
   Menu section (BOTTOM – BLUE background)
========================================================= */
.gpud-menu-blue{
  background: linear-gradient(
    180deg,
    rgba(35,0,240,0.95),
    rgba(35,0,240,0.85)
  );
  border-radius: 20px;
  padding: 14px;
  box-shadow:
    0 10px 30px rgba(35,0,240,.25),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.gpud-nav{
  display: grid;
  gap: 8px;
}

.gpud-nav-item{
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 15px;
  color: #ffffff;
  background: rgba(255,255,255,.08);
  transition: all .18s ease;
}

.gpud-nav-item:hover{
  background: rgba(255,255,255,.16);
  transform: translateX(-2px);
}

.gpud-nav-item.is-active{
  background: #ffffff;
  color: #2300F0;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* =========================================================
   Buttons
========================================================= */
.gpud-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #ffffff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
}

.gpud-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

.gpud-btn-small{
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 12px;
}

.gpud-btn-ghost{
  background: rgba(0,0,0,.04);
}

.gpud-btn-danger{
  border-color: rgba(220,53,69,.45);
  color: #dc3545;
}

/* =========================================================
   Boxes / Typography
========================================================= */
.gpud-box{
  padding: 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}

.gpud-h3{
  margin: 0 0 8px;
  font-size: 18px;
}

.gpud-h4{
  margin: 14px 0 8px;
  font-size: 15px;
}

.gpud-list{
  margin: 0;
  padding-inline-start: 18px;
}

/* =========================================================
   Tables
========================================================= */
.gpud-table-wrap{
  overflow-x: auto;
}

.gpud-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.gpud-table th,
.gpud-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  text-align: start;
  white-space: nowrap;
}

.gpud-table th{
  font-weight: 600;
  opacity: .8;
}

/* =========================================================
   Modal (Logout)
========================================================= */
.gpud-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.gpud-modal.is-open{
  display: block;
}

.gpud-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.gpud-modal-card{
  position: relative;
  max-width: 420px;
  margin: 12vh auto 0;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}

.gpud-modal-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.gpud-modal-title{
  font-size: 16px;
}

.gpud-modal-x{
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

.gpud-modal-body{
  padding: 14px 0;
}

.gpud-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* =========================================================
   RTL / LTR polish
========================================================= */
[dir="rtl"] .gpud-nav-item:hover{
  transform: translateX(2px);
}

[dir="rtl"] .gpud-profile-top{
  grid-template-columns: 1fr 96px;
}

/* =========================================================
   Mobile
========================================================= */
@media (max-width: 900px){
  .gpud-grid{
    grid-template-columns: 1fr;
  }
  .gpud-menu{
    position: static;
  }
}

@media (max-width: 520px){
  .gpud-profile-top{
    grid-template-columns: 1fr;
  }
  [dir="rtl"] .gpud-profile-top{
    grid-template-columns: 1fr;
  }
  .gpud-avatar{
    margin: 0 auto;
  }
  .gpud-avatar-actions{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .gpud-btn-small{
    padding: 9px 12px;
    font-size: 14px;
  }
}

.gpud-form label{
  display:block;
  font-size:13px;
  margin: 0 0 6px;
  opacity:.85;
}

.gpud-form input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-sizing:border-box;
}

.gpud-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 700px){
  .gpud-form-grid{ grid-template-columns: 1fr; }
}

.gpud-btn-primary{
  background: #2300F0;
  color: #fff;
  border-color: rgba(35,0,240,.75);
}

.gpud-btn-primary:hover{
  box-shadow: 0 10px 22px rgba(35,0,240,.25);
}

.gpud-btn-pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1;
  border: 1px solid rgba(35,0,240,.45);
  color: #2300F0;
  background: rgba(35,0,240,.06);
}

.gpud-btn-pill:hover{
  background: rgba(35,0,240,.12);
}

/* Mobile accordion is hidden on desktop */
.gpud-mobile-accordion{ display:none; }

@media (max-width: 900px){
  /* Hide desktop grid and show accordion */
  .gpud-grid{ display:none; }
  .gpud-mobile-accordion{ display:block; }

  .gpud-acc-item{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    margin-bottom: 12px;
  }

  .gpud-acc-btn{
    width: 100%;
    padding: 14px 14px;
    background: #fff;
    border: 0;
    display:flex;
    align-items:center;
    justify-content: space-between;
    font-size: 15px;
    cursor: pointer;
  }

  .gpud-acc-icon{
    transition: transform .18s ease;
    opacity: .8;
  }

  .gpud-acc-btn[aria-expanded="true"] .gpud-acc-icon{
    transform: rotate(180deg);
  }

  .gpud-acc-panel{
    padding: 14px;
    border-top: 1px solid rgba(0,0,0,.08);
    background: rgba(35,0,240,.03);
  }

  .gpud-acc-logout-link{
    display:block;
    padding: 14px;
    text-decoration:none;
    color:#dc3545;
    font-weight:600;
  }
}

@media (max-width: 900px){
  .gpud-acc-loading{
    padding: 10px 0;
    opacity: .7;
    font-size: 14px;
  }
}

.gpud-avatar-preview img,
.gpud-avatar-preview span,
#gpud-avatar-canvas {
  border-radius: 50% !important;
  object-fit: cover;
}

/* Modal */
.gpud-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.gpud-modal-inner {
  background: #111;
  padding: 20px;
  border-radius: 16px;
  width: 360px;
}

.gpud-crop-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 15px auto;
}

.gpud-crop-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
}

.gpud-notice-ok{
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:12px;
  background: rgba(46, 204, 113, .15);
}

.gpud-avatar-hint{
  margin: 10px 0 0;
  font-size: 13px;
  opacity: .85;
  line-height: 1.6;
}

.gpud-zoom-controls{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top: 10px;
}

.gpud-zoom-controls .gpud-btn{
  padding: 8px 12px;
  border-radius: 12px;
}

/* Hint unter File-Input gut lesbar */
.gpud-avatar-hint{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  text-align: center;
}

/* Zoom Buttons sichtbar + klickbar */
.gpud-zoom-controls{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top: 12px;
  position: relative;
  z-index: 5; /* über mask */
}

.gpud-zoom-controls .gpud-btn{
  min-width: 46px;
  padding: 8px 0;
  font-size: 18px;
  border-radius: 12px;
}

/* falls deine mask zu aggressiv ist */
.gpud-crop-wrapper{
  position: relative;
}
.gpud-crop-mask{
  pointer-events:none; /* mask darf keine clicks fressen */
}

.gpud-zoom-controls{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top: 14px;
  position: relative;
  z-index: 10;
}

.gpud-zoom-controls .gpud-btn{
  width: 54px;
  height: 44px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 22px;
  font-weight: 800;

  border-radius: 14px;

  /* sichtbarer Kontrast */
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.95);

  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.gpud-zoom-controls .gpud-btn:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.40);
}

.gpud-zoom-controls .gpud-btn:active{
  transform: scale(.98);
}

/* ==========================
   MOBILE: Avatar + Buttons sichtbar
   ========================== */
@media (max-width: 768px){

  /* Sidebar/Profile nicht verstecken */
  .gpud-menu,
  .gpud-profile-topcard{
    display:block !important;
  }

  /* Avatar Bereich nicht kollabieren */
  .gpud-profile-top{
    display:flex !important;
    align-items:center;
    gap:12px;
  }

  .gpud-avatar-wrap{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:auto;
  }

  /* Buttons sichtbar + nebeneinander */
  .gpud-avatar-actions{
    display:flex !important;
    flex-direction:row !important;
    gap:10px;
    align-items:center;
    justify-content:flex-start;
    margin-top:0 !important;
  }

  .gpud-avatar-actions .gpud-btn{
    width:auto;
    padding:10px 12px;
    font-size:13px;
    white-space:nowrap;
  }

  /* Avatar rund & korrekt */
  .gpud-avatar-img,
  .gpud-avatar,
  .gpud-avatar-wrap img{
    border-radius:999px !important;
    object-fit:cover !important;
  }
}

/* Mobile profile header above accordion */
.gpud-mobile-profile{
  margin: 0 0 14px;
}

@media (min-width: 769px){
  .gpud-mobile-profile{ display:none; }
}
.gpud-move-controls{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top: 10px;
  position: relative;
  z-index: 10;
}

.gpud-move-controls .gpud-btn{
  width: 46px;
  height: 42px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  font-weight: 800;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.95);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.gpud-move-controls .gpud-btn:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.40);
}

/* =========================================================
   Support tickets tab
========================================================= */
.gpud-ticket-box{
  margin-bottom: 14px;
}

.gpud-ticket-filter{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.gpud-ticket-filter label{
  font-size: 13px;
  opacity: .82;
}

.gpud-ticket-filter select{
  min-width: 210px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 14px;
}

.gpud-ticket-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
}

.gpud-ticket-status-open{
  background: rgba(35,0,240,.08);
  color: #2300F0;
  border-color: rgba(35,0,240,.18);
}

.gpud-ticket-status-processing{
  background: rgba(255,184,0,.14);
  color: #805200;
  border-color: rgba(255,184,0,.28);
}

.gpud-ticket-status-customer_reply{
  background: rgba(115,11,219,.10);
  color: #730BDB;
  border-color: rgba(115,11,219,.22);
}

.gpud-ticket-status-closed{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.68);
  border-color: rgba(0,0,0,.10);
}

.gpud-ticket-actions{
  text-align: end;
}

.gpud-ticket-table td{
  vertical-align: middle;
}

@media (max-width: 700px){
  .gpud-ticket-filter{
    display:block;
  }

  .gpud-ticket-filter label,
  .gpud-ticket-filter select{
    display:block;
    width:100%;
  }

  .gpud-ticket-filter label{
    margin-bottom: 6px;
  }

  .gpud-ticket-table-wrap{
    overflow-x: visible;
  }

  .gpud-ticket-table,
  .gpud-ticket-table thead,
  .gpud-ticket-table tbody,
  .gpud-ticket-table tr,
  .gpud-ticket-table th,
  .gpud-ticket-table td{
    display:block;
    width:100%;
    box-sizing:border-box;
  }

  .gpud-ticket-table thead{
    display:none;
  }

  .gpud-ticket-table tr{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    margin-bottom:12px;
    padding:10px 12px;
  }

  .gpud-ticket-table td{
    white-space:normal;
    border-bottom:0;
    padding:8px 0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }

  .gpud-ticket-table td::before{
    content: attr(data-label);
    font-weight:700;
    opacity:.72;
    flex: 0 0 42%;
  }

  .gpud-ticket-actions{
    justify-content:flex-end !important;
  }

  .gpud-ticket-actions::before{
    display:none;
  }
}

/* Ticket create form inside dashboard */
.gpud-ticket-headrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.gpud-ticket-headrow .gpud-h3{
  margin-bottom:0;
}
.gpud-ticket-new-btn{
  white-space:nowrap;
}
.gpud-ticket-intro{
  margin:8px 0 12px;
  opacity:.82;
  line-height:1.7;
}
.gpud-ticket-form-wrap{
  max-width:620px;
  margin-inline:auto;
}
.gpud-ticket-form-wrap .zohali-form{
  margin-top:0;
}
@media (max-width:700px){
  .gpud-ticket-headrow{
    display:block;
  }
  .gpud-ticket-new-btn{
    display:block;
    width:100%;
    text-align:center;
    margin-top:12px;
  }
  .gpud-ticket-form-wrap{
    max-width:100%;
  }
}


/* v1.0.3: mobile-safe embedded ticket form */
.gpud-mobile-direct-content{display:none;}
@media (max-width:900px){
  .gpud-mobile-direct-content{display:block;}
  .gpud-new-ticket-box{margin-bottom:12px;}
  .gpud-ticket-form-wrap{width:100%;max-width:100%;overflow:visible;box-sizing:border-box;}
  .gpud-ticket-form-wrap .zohali-form{width:100% !important;max-width:100% !important;box-sizing:border-box;margin-left:auto;margin-right:auto;}
  .gpud-ticket-form-wrap .zohali-form input,
  .gpud-ticket-form-wrap .zohali-form select,
  .gpud-ticket-form-wrap .zohali-form textarea{max-width:100%;box-sizing:border-box;}
}


/* v1.0.5: visible ticket actions + dashboard ticket detail/reply */
.gpud-ticket-actions{
  min-width: 160px;
  white-space: nowrap;
}
.gpud-ticket-actions .gpud-btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:3px;
  text-decoration:none;
}
.gpud-btn-pill-reply{
  font-weight:700;
}
.gpud-ticket-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}
.gpud-ticket-detail-grid>div,
.gpud-ticket-original,
.gpud-ticket-history-item,
.gpud-ticket-reply-form{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px;
}
.gpud-ticket-original{margin:12px 0;line-height:1.8;}
.gpud-ticket-history{display:grid;gap:12px;margin:10px 0 18px;}
.gpud-ticket-history-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-size:13px;
  color:#20205a;
}
.gpud-ticket-history-text{line-height:1.8;white-space:normal;}
.gpud-history-customer_reply{border-color:rgba(35,0,240,.28);background:rgba(35,0,240,.035);}
.gpud-history-reply_sent{border-color:rgba(0,120,80,.22);background:rgba(0,160,110,.035);}
.gpud-ticket-attachments{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.gpud-ticket-attachment{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(35,0,240,.25);
  border-radius:12px;
  background:#fff;
  text-decoration:none;
}
.gpud-ticket-attachment-img{display:flex;flex-direction:column;align-items:flex-start;max-width:180px;}
.gpud-ticket-attachment-img img{max-width:160px;max-height:120px;border-radius:10px;display:block;}
.gpud-ticket-reply-form{display:grid;gap:12px;margin-top:14px;}
.gpud-ticket-reply-form label{display:grid;gap:7px;}
.gpud-ticket-reply-form textarea,
.gpud-ticket-reply-form input[type="file"]{
  width:100%;box-sizing:border-box;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:10px;background:#fff;
}
@media (max-width:900px){
  .gpud-ticket-detail-grid{grid-template-columns:1fr;}
  .gpud-ticket-actions{min-width:0;white-space:normal;justify-content:flex-start !important;gap:8px;}
  .gpud-ticket-actions .gpud-btn-pill{flex:1 1 120px;padding:10px 12px;}
  .gpud-ticket-history-head{display:block;}
}
@media (max-width:700px){
  .gpud-ticket-form-wrap .zohali-form{transform:none !important;left:auto !important;right:auto !important;}
}
.gpud-ticket-status-answered{background:#dcfce7;color:#166534;}