/*
 * COPYRIGHT
 * ESTATA Hub
 * Datei: modules\notifications\Assets\notifications.css
 * Autor: Erkan BALKIS | estata-solutions.com
 * (c) 2026 ESTATA Solutions. Alle Rechte vorbehalten.
 */

.estata-nc, .estata-nc *, .estata-notification-inbox *, .estata-notification-admin *,
.estata-nc-toast, .estata-nc-toast * { box-sizing: border-box; }
.estata-nc { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; }
.estata-nc [hidden], .estata-notification-toast-stack[hidden] { display: none !important; }
.estata-nc-bell {
  appearance: none; position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 43px; height: 43px; padding: 0;
  background: rgba(249,173,24,.09); border: 1px solid rgba(249,173,24,.42);
  border-radius: 13px; color: #ffd27a; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.estata-nc-bell:hover, .estata-nc-bell[aria-expanded="true"] {
  background: rgba(249,173,24,.19); border-color: rgba(249,173,24,.78);
}
.estata-nc-bell:focus-visible, .estata-nc button:focus-visible, .estata-nc a:focus-visible,
.estata-notification-admin button:focus-visible {
  outline: 2px solid #ffd27a; outline-offset: 3px;
}
.estata-nc-bell svg { width: 23px; height: 23px; fill: none; stroke: currentColor;
  stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.estata-nc-badge {
  position: absolute; top: -7px; right: -8px; min-width: 21px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; border-radius: 20px; background: #e74a3b; color: #fff;
  font-size: 10px; font-weight: 900; line-height: 1; border: 2px solid #0d1b2e;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.estata-nc-panel {
  position: absolute; top: calc(100% + 15px); right: 0; width: min(430px, 92vw);
  max-height: min(75vh, 660px); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(249,173,24,.44); border-radius: 17px;
  background: #0a1728; color: #f3f7ff;
  box-shadow: 0 26px 65px rgba(0,0,0,.7); z-index: 99999;
}
.estata-nc-panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.09); }
.estata-nc-panel-head strong { font-size: 14px; color: #fff; font-weight: 800; }
.estata-nc-panel-head a { color: #ffd27a; text-decoration: none; font-size: 12px; }
.estata-nc-panel-head a:hover { color: #fff; }
.estata-nc-panel-actions { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 13px; background: rgba(255,255,255,.025); }
.estata-nc-panel-actions a, .estata-nc-panel-actions button {
  background: transparent; border: 0; color: #ffd27a; padding: 5px;
  text-decoration: none; font-size: 12px; font-weight: 700; cursor: pointer;
}
.estata-nc-panel-actions button:disabled { opacity: .45; cursor: default; }
.estata-nc-panel-items { min-height: 40px; overflow: auto; overscroll-behavior: contain; }
.estata-nc-empty { padding: 28px 16px; text-align: center; color: #a9b9cb; font-size: 13px; }
.estata-nc-item, .estata-nc-toast {
  --notice-accent: #f9ad18; --notice-wash: rgba(249,173,24,.10);
  border-left: 4px solid var(--notice-accent); color: #fff;
  background: linear-gradient(115deg, var(--notice-wash), rgba(12,24,42,.99) 50%);
}
.estata-nc-item.is-success, .estata-nc-toast.is-success {
  --notice-accent: #46d894; --notice-wash: rgba(70,216,148,.12);
}
.estata-nc-item.is-urgent, .estata-nc-toast.is-urgent {
  --notice-accent: #ff6969; --notice-wash: rgba(255,105,105,.14);
}
.estata-nc-item { padding: 14px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.estata-nc-item.is-read { opacity: .67; }
.estata-nc-item-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; }
.estata-nc-category { font-weight: 800; font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--notice-accent); }
.estata-nc-date { font-size: 10px; color: #9eafc3; white-space: nowrap; }
.estata-nc-item-title { font-size: 14px !important; font-weight: 800 !important; line-height: 1.35;
  color: #fff !important; margin: 0 0 6px; }
.estata-nc-item-body { font-size: 12px; line-height: 1.55; color: #c8d4e2;
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.estata-nc-item-actions { display: flex; justify-content: flex-end; flex-wrap: wrap;
  align-items: center; gap: 9px; margin-top: 10px; }
.estata-nc-open, .estata-nc-read { text-decoration: none; padding: 7px 11px;
  font-weight: 750 !important; font-size: 11px !important; line-height: 1.25;
  color: #fff !important; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2); border-radius: 9px; cursor: pointer; }
.estata-nc-read { background: rgba(249,173,24,.14); border-color: rgba(249,173,24,.48);
  color: #ffe09d !important; }
.estata-nc-open:hover, .estata-nc-read:hover { background: rgba(249,173,24,.25); color: #fff !important; }
.estata-nc-read:disabled { cursor: wait; opacity: .6; }
.estata-nc-error { padding: 9px 12px; background: #63222d; color: #fff; font-size: 12px; }

.estata-notification-toast-stack { position: fixed; top: 116px; right: 22px;
  width: min(410px, calc(100vw - 24px)); max-height: calc(100vh - 135px);
  overflow-y: auto; display: flex; flex-direction: column; gap: 10px; z-index: 100400;
  pointer-events: none; }
.estata-notification-toast-stack > * { pointer-events: auto; }
.estata-nc-toast { padding: 14px; border: 1px solid rgba(255,255,255,.1);
  border-left: 5px solid var(--notice-accent); border-radius: 15px;
  background: linear-gradient(125deg, var(--notice-wash), #091829 55%);
  box-shadow: 0 15px 45px rgba(0,0,0,.58); }
.estata-nc-toast-brand { font-size: 11px; font-weight: 800; letter-spacing: .6px;
  color: #dce9f9; margin-bottom: 8px; }
.estata-nc-toast-brand .estata-font { font-size: 20px; letter-spacing: 0; }
.estata-nc-toast .estata-nc-item-title { font-size: 15px !important; }
.estata-nc-toast .estata-nc-item-body { font-size: 12px; }

.estata-notification-inbox, .estata-notification-admin { color: #edf3ff; }
.estata-notification-page-head { display: flex; justify-content: space-between; align-items: start;
  gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
.estata-notification-page-head h1 { font-size: clamp(24px, 3vw, 32px); color: #f9ad18;
  font-weight: 800; }
.estata-notification-page-head p { color: #b8c9dc; margin: 5px 0; }
.estata-notification-page-count { display: inline-flex; padding: 7px 13px;
  border: 1px solid rgba(249,173,24,.45); border-radius: 25px; color: #ffdd98; }
.estata-notification-inbox-card, .estata-notification-setting-card {
  padding: 17px 19px; background: #0f1c2d; border: 1px solid rgba(249,173,24,.23);
  border-radius: 15px; margin-bottom: 12px; }
.estata-notification-inbox-card.is-read { opacity: .68; }
.estata-notification-inbox-meta { display: flex; flex-wrap: wrap; justify-content: space-between;
  color: #ffd27a; font-size: 12px; gap: 10px; }
.estata-notification-inbox-card h2 { color: #fff; font-size: 18px; margin-top: 9px; }
.estata-notification-inbox-card p { color: #b8c9dc; white-space: pre-wrap; overflow-wrap: anywhere; }
.estata-notification-inbox-open { display: inline-flex; color: #ffd27a; text-decoration: none; }
.estata-notification-inbox-open:hover { color: #fff; }
.estata-notification-admin-flash { border: 1px solid rgba(70,216,148,.4);
  color: #aef0d0; padding: 12px; border-radius: 10px; }
.estata-notification-admin-flash.is-error { color: #ffafaf; border-color: rgba(255,105,105,.4); }
.estata-notification-admin-help { color: #b6cce3; font-size: 13px; }
.estata-notification-setting-head { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.estata-notification-setting-head h2 { font-size: 17px; font-weight: 800; color: #fff; margin: 0; }
.estata-notification-setting-head code { color: #9cb3cb; font-size: 11px; }
.estata-notification-setting-controls { display: flex; flex-wrap: wrap; gap: 14px 22px;
  align-items: center; margin-bottom: 12px; }
.estata-notification-setting-controls label, .estata-notification-role-list label {
  color: #ecf2fc; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.estata-notification-admin input[type="checkbox"] { accent-color: #f9ad18; width: 17px; height: 17px; }
.estata-notification-setting-controls select { background: #17263a; color: #fff; padding: 7px;
  border: 1px solid rgba(249,173,24,.35); border-radius: 8px; }
.estata-notification-role-details { padding-top: 9px; border-top: 1px solid rgba(255,255,255,.08); }
.estata-notification-role-details summary { color: #ffd27a; font-size: 13px; cursor: pointer; }
.estata-notification-role-list { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 12px; }
.estata-notification-role-all { width: 100%; }
.estata-notification-admin-actions { display: flex; justify-content: end; margin-top: 18px; }
.estata-notification-primary, .estata-notification-secondary { padding: 11px 17px;
  border-radius: 11px; border: 1px solid rgba(249,173,24,.65);
  font-weight: 750; cursor: pointer; background: #f9ad18; color: #12171e; }
.estata-notification-secondary { color: #ffdb90; background: rgba(249,173,24,.11); }
.estata-notification-test-form { margin: 18px 0 40px; }
@media (max-width: 991px) {
  .estata-nc { order: 0; }
  .estata-nc-bell { width: 39px; height: 39px; }
  .estata-nc-panel { width: min(420px, calc(100vw - 24px)); }
}
@media (max-width: 700px) {
  .estata-nc-panel { position: fixed; right: 10px; left: 10px; width: auto;
    top: 72px; max-height: calc(100dvh - 85px); }
  .estata-notification-toast-stack { top: 100px; left: 10px; right: 10px;
    width: auto; max-height: calc(100dvh - 113px); }
  .estata-notification-inbox-card, .estata-notification-setting-card { padding: 13px; }
}

/* Keep the panel usable when an appointment reminder is visible. */
body:has(.estata-nc-panel:not([hidden])) .enc-nav { z-index: 100700 !important; }


/* =====================================================================
   ESTATA Hub - Benachrichtigungskategorien und Rollen DE / EN / TR
   Reine Admin-Ansicht; technische Rollen und Berechtigungen bleiben gleich.
   ===================================================================== */
.estata-notification-setting-head { align-items: flex-start; }
.estata-notification-setting-hint {
  display: inline-flex;
  align-items: center;
  max-width: 52%;
  padding: 6px 10px;
  border: 1px solid rgba(249,173,24,.25);
  border-radius: 999px;
  background: rgba(249,173,24,.06);
  color: #f0ce88;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
}
.estata-notification-role-list { display: block; margin-top: 12px; }
.estata-notification-role-list .estata-notification-role-all {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid rgba(249,173,24,.29);
  border-radius: 10px;
  background: rgba(249,173,24,.055);
  font-weight: 700;
  cursor: pointer;
}
.estata-notification-role-group { margin-top: 13px; }
.estata-notification-role-group + .estata-notification-role-group {
  border-top: 1px solid rgba(255,255,255,.075);
  padding-top: 13px;
}
.estata-notification-role-group h3 {
  margin: 0 0 9px;
  color: #f9ad18;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}
.estata-notification-role-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 8px;
}
.estata-notification-role-list .estata-notification-role-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: #edf3ff;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.estata-notification-role-option > span,
.estata-notification-role-all > span { overflow-wrap: anywhere; }
.estata-notification-role-list .estata-notification-role-option:hover {
  border-color: rgba(249,173,24,.42);
  background: rgba(249,173,24,.09);
}
.estata-notification-role-list .estata-notification-role-option:has(input:checked) {
  border-color: rgba(249,173,24,.33);
  background: rgba(249,173,24,.075);
}
.estata-notification-role-details.is-all-internal .estata-notification-role-option {
  opacity: .45;
  cursor: not-allowed;
}
.estata-notification-role-option input,
.estata-notification-role-all input { flex: 0 0 auto; }
@media (max-width: 700px) {
  .estata-notification-setting-hint { max-width: 100%; }
  .estata-notification-setting-head { flex-wrap: wrap; }
  .estata-notification-role-options { grid-template-columns: 1fr; }
}


/* =====================================================================
   ESTATA Hub - notification date and vertical Close / Open buttons
   No modifications to existing CRM reminders or global navbar.
   ===================================================================== */
.estata-nc-notice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: start;
  column-gap: 12px;
}
.estata-nc-notice-main { min-width: 0; overflow-wrap: anywhere; }
.estata-nc-notice-main .estata-nc-category {
  display: block; margin-bottom: 9px;
}
.estata-nc-notice-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.estata-nc-notice-side .estata-nc-date {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}
.estata-nc-notice-side .estata-nc-item-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin: 0;
}
.estata-nc-notice-side .estata-nc-open,
.estata-nc-notice-side .estata-nc-dismiss {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 9px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.2;
  cursor: pointer;
}
.estata-nc-notice-side .estata-nc-dismiss {
  border: 1px solid rgba(255,124,124,.38);
  background: rgba(255,105,105,.07);
  color: #ffcbcb !important;
}
.estata-nc-notice-side .estata-nc-dismiss:hover {
  border-color: rgba(255,124,124,.75);
  background: rgba(255,105,105,.16);
  color: #fff !important;
}
.estata-nc-notice-side .estata-nc-dismiss:disabled {
  opacity: .5;
  cursor: wait;
}
.estata-nc-notice-side .estata-nc-open:focus-visible,
.estata-nc-notice-side .estata-nc-dismiss:focus-visible {
  outline: 2px solid #ffd27a;
  outline-offset: 2px;
}
@media (max-width: 430px) {
  .estata-nc-notice-layout { grid-template-columns: minmax(0, 1fr) 104px; gap: 9px; }
  .estata-nc-item, .estata-nc-toast { padding: 12px 10px; }
  .estata-nc-notice-side .estata-nc-date { font-size: 9px; }
  .estata-nc-notice-side .estata-nc-open,
  .estata-nc-notice-side .estata-nc-dismiss { font-size: 10px !important; padding-inline: 6px; }
}
@media (max-width: 340px) {
  .estata-nc-notice-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .estata-nc-notice-side { align-items: flex-end; }
  .estata-nc-notice-side .estata-nc-item-actions { width: 108px; }
}

/* =====================================================================
   ESTATA Hub - Posteingang V1.2: Ungelesen / Gelesen und Seitennavigation
   Only the inbox is affected; bell and appointment popups stay unchanged.
   ===================================================================== */
.estata-notification-inbox-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.estata-notification-inbox-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 170px;
  min-height: 45px;
  padding: 9px 18px;
  border: 1px solid rgba(249,173,24,.35);
  border-radius: 12px;
  background: rgba(14,27,46,.86);
  color: #cfdaea !important;
  font-size: 14px;
  font-weight: 750 !important;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.estata-notification-inbox-tab:hover {
  border-color: rgba(249,173,24,.76);
  background: rgba(249,173,24,.10);
  color: #fff !important;
}
.estata-notification-inbox-tab.is-active {
  border-color: #f9ad18;
  background: linear-gradient(180deg,#ffd27a,#f9ad18);
  color: #12171e !important;
  box-shadow: 0 8px 25px rgba(249,173,24,.14);
}
.estata-notification-inbox-tab.is-active:hover { color: #12171e !important; }
.estata-notification-inbox-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 25px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}
.estata-notification-inbox-tab.is-active .estata-notification-inbox-tab-count {
  background: rgba(17,23,30,.16);
  border-color: rgba(17,23,30,.2);
}
.estata-notification-inbox .estata-notification-inbox-card.is-read { opacity: .84; }
.estata-notification-inbox .estata-notification-inbox-card.is-read:hover { opacity: 1; }
.estata-notification-inbox .estata-notification-inbox-card { margin-bottom: 13px; }
.estata-notification-inbox-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.estata-notification-inbox-card-actions form { margin: 0; }
.estata-notification-inbox-open,
.estata-notification-inbox-mark-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 7px 13px;
  border: 1px solid rgba(249,173,24,.47);
  border-radius: 9px;
  background: rgba(249,173,24,.09);
  color: #ffd27a !important;
  font-size: 13px;
  font-weight: 700 !important;
  text-decoration: none;
  cursor: pointer;
}
.estata-notification-inbox-mark-read {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.18);
  color: #e4edf7 !important;
}
.estata-notification-inbox-open:hover,
.estata-notification-inbox-mark-read:hover {
  background: rgba(249,173,24,.19);
  border-color: #f9ad18;
  color: #fff !important;
}
.estata-notification-inbox-empty {
  padding: 38px 22px;
  border: 1px dashed rgba(249,173,24,.25);
  border-radius: 15px;
  background: rgba(15,28,45,.7);
  text-align: center;
  color: #b8c9dc;
}
.estata-notification-inbox-empty strong { display: block; color: #fff; margin-bottom: 6px; }
.estata-notification-inbox-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
}
.estata-notification-inbox-pagination a,
.estata-notification-inbox-pagination span.estata-notification-page-ellipsis {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid rgba(249,173,24,.3);
  border-radius: 9px;
  background: rgba(15,28,45,.85);
  color: #dfe6f1 !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.estata-notification-inbox-pagination a:hover,
.estata-notification-inbox-pagination a.is-current {
  border-color: #f9ad18;
  color: #101826 !important;
  background: #f9ad18;
}
.estata-notification-inbox-pagination .estata-notification-page-ellipsis {
  border-color: transparent !important;
  background: transparent !important;
}
.estata-notification-inbox-retention {
  margin: 20px 0 8px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: #aabbd1;
  font-size: 12px;
  line-height: 1.6;
}
.estata-notification-inbox-error {
  padding: 10px 13px;
  margin: 12px 0;
  border: 1px solid rgba(255,110,110,.32);
  border-radius: 10px;
  background: rgba(180,35,35,.10);
  color: #ffc2c2;
}
@media (max-width: 700px) {
  .estata-notification-inbox-tabs { gap: 8px; }
  .estata-notification-inbox-tab { min-width: 0; flex: 1 1 140px; padding-inline: 10px; }
  .estata-notification-inbox-pagination a { min-width: 32px; }
  .estata-notification-inbox .estata-notification-inbox-card { padding: 15px; }
}