/* Eterano v0.7.0 — notifications, communication settings and request rejection */

.notification-button{position:relative;flex:0 0 auto}
.notification-button svg,.notification-row-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notification-count{position:absolute;right:-5px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#ff5a6c,#e93557);color:#fff;border:2px solid #fff;font-size:.67rem;line-height:1;font-weight:900;box-shadow:0 5px 14px rgba(199,42,75,.28)}

.notification-backdrop{position:fixed;inset:0;z-index:118;border:0;background:rgba(3,13,39,.42);backdrop-filter:blur(3px)}
.notification-drawer{position:fixed;z-index:120;top:0;right:0;width:min(430px,100vw);height:100dvh;display:flex;flex-direction:column;background:rgba(255,255,255,.98);border-left:1px solid var(--line);box-shadow:-24px 0 70px rgba(5,22,60,.18);transform:translateX(105%);visibility:hidden;transition:transform .24s ease,visibility .24s ease}
.notification-drawer.open{transform:translateX(0);visibility:visible}
.notification-drawer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:25px 22px 17px;border-bottom:1px solid var(--line)}
.notification-drawer-header h2{margin:0;font-size:1.55rem;letter-spacing:-.035em}
.notification-drawer-tools{display:grid;gap:8px;padding:16px 22px;border-bottom:1px solid var(--line)}
.notification-drawer-tools p{margin:0;line-height:1.5}
.notification-drawer-tools .text-button{justify-self:start}
.notification-list{min-height:0;overflow:auto;padding:10px 12px 24px;display:grid;align-content:start;gap:7px}
.notification-row{width:100%;display:grid;grid-template-columns:43px minmax(0,1fr) 18px;align-items:center;gap:11px;border:1px solid transparent;border-radius:17px;padding:13px 11px;background:transparent;text-align:left;color:inherit}
.notification-row:hover{background:#f4f8fe;border-color:#dfeaf7}
.notification-row.is-unread{background:#eef6ff;border-color:#d4e8ff}
.notification-row-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:#e3f1ff;color:#0863d6}
.notification-row.is-unread .notification-row-icon{background:linear-gradient(145deg,#0757d8,#12bde9);color:#fff;box-shadow:0 7px 18px rgba(7,87,216,.18)}
.notification-row-content{display:grid;gap:3px;min-width:0}
.notification-row-title{font-size:.93rem;font-weight:850;line-height:1.3}
.notification-row-body{font-size:.82rem;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notification-row-time{font-size:.72rem;color:#7285a1;font-weight:700}
.notification-row-arrow{color:#7890ad;font-size:1.45rem}
.notification-empty{margin:18px 7px}
body.notifications-open{overflow:hidden}

.communication-settings-card{display:grid;gap:14px}
.communication-settings-card .section-heading,.communication-settings-card>p{margin-bottom:0}
.communication-options{display:grid;gap:4px}
.communication-options .checkbox-row{margin:0;padding:12px;border:1px solid #e1eaf5;border-radius:14px;background:#f8fbff;align-items:flex-start}
.communication-options .checkbox-row span{line-height:1.45}
.settings-warning{margin:0;padding:11px 12px;border:1px solid #f2cf86;border-radius:13px;background:#fff7e4;color:#76530e;font-size:.84rem;line-height:1.45;font-weight:700}
.communication-settings-card>.primary{justify-self:start}

.danger-action{background:#fff0f2!important;color:#ad2941!important;border-color:#f4c5cd!important}
.danger-action:hover{background:#ffe3e7!important;border-color:#ecaeba!important}
.danger-primary{background:linear-gradient(135deg,#c63b50,#e65465)!important;box-shadow:0 10px 25px rgba(179,42,63,.22)!important}
.reject-request-modal{max-width:580px}
.reject-request-modal form>p{margin-top:0;line-height:1.55}
.customer-message-section{border-left:4px solid #e45165}

html[data-theme="dark"] .notification-count{border-color:#0d1a31}
html[data-theme="dark"] .notification-backdrop{background:rgba(0,5,18,.65)}
html[data-theme="dark"] .notification-drawer{background:rgba(9,21,40,.99);border-color:#263b58;box-shadow:-24px 0 70px rgba(0,0,0,.42)}
html[data-theme="dark"] .notification-drawer-header,html[data-theme="dark"] .notification-drawer-tools{border-color:#263b58}
html[data-theme="dark"] .notification-row:hover{background:#12243d;border-color:#2a4362}
html[data-theme="dark"] .notification-row.is-unread{background:#112b4a;border-color:#285981}
html[data-theme="dark"] .notification-row-icon{background:#173451;color:#8bc7ff}
html[data-theme="dark"] .notification-row-body,html[data-theme="dark"] .notification-row-time{color:#91a4c0}
html[data-theme="dark"] .communication-options .checkbox-row{background:#0a172b;border-color:#293e5b}
html[data-theme="dark"] .settings-warning{background:#332812;border-color:#765b24;color:#f2cf86}
html[data-theme="dark"] .danger-action{background:#3b1c27!important;color:#ff9aaa!important;border-color:#6b3040!important}

@media(max-width:760px){
  .notification-drawer{width:min(92vw,420px)}
  .notification-drawer-header{padding:20px 17px 15px}
  .notification-drawer-tools{padding:14px 17px}
  .notification-list{padding:9px 9px 20px}
  .notification-row{grid-template-columns:40px minmax(0,1fr) 15px;padding:12px 9px}
  .notification-row-icon{width:40px;height:40px}
  .communication-settings-card>.primary{width:100%}
}

@media(max-width:520px){
  .notification-drawer{width:100vw}
  .notification-drawer-header h2{font-size:1.35rem}
  .notification-button{width:42px;min-height:42px}
  .notification-count{right:-3px;top:-5px}
}