/* AkvarieVerden notifikationsklokke - komplet CSS */

.notification-menu {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 6px !important;
}

.notification-bell {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #0b5d54, #0f7468) !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 21px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 7px 18px rgba(11, 93, 84, .28) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.notification-bell:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(11, 93, 84, .34) !important;
}

.notification-bell:active {
    transform: scale(.96) !important;
}

.notification-bell-icon {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    color: #ffffff !important;
    font-size: 21px !important;
    line-height: 1 !important;
    transform-origin: 50% 10% !important;
}

.notification-bell.has-new .notification-bell-icon {
    animation: notification-bell-ring .8s ease-in-out 2 !important;
}

@keyframes notification-bell-ring {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(16deg); }
    30% { transform: rotate(-14deg); }
    45% { transform: rotate(11deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(5deg); }
}

.notification-badge {
    position: absolute !important;
    top: -6px !important;
    right: -7px !important;
    z-index: 10 !important;
    min-width: 21px !important;
    height: 21px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    background: #e53935 !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    box-shadow: 0 3px 9px rgba(229, 57, 53, .4) !important;
}

.notification-badge.is-hidden {
    display: none !important;
}

.notification-dropdown {
    position: absolute !important;
    top: calc(100% + 13px) !important;
    right: 0 !important;
    z-index: 99999 !important;
    width: min(390px, calc(100vw - 24px)) !important;
    overflow: hidden !important;
    border: 1px solid #d9e9e5 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 60px rgba(20, 63, 56, .22) !important;
}

.notification-dropdown[hidden] {
    display: none !important;
}

.notification-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid #e8f0ee !important;
    background: #ffffff !important;
}

.notification-dropdown-header strong {
    color: #183e38 !important;
    font-size: 15px !important;
}

.notification-dropdown-header button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0b5d54 !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.notification-dropdown-list {
    max-height: 420px !important;
    overflow-y: auto !important;
}

.notification-dropdown-item {
    display: flex !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #edf3f2 !important;
    background: #ffffff !important;
    color: inherit !important;
    text-decoration: none !important;
}

.notification-dropdown-item:hover {
    background: #f5fbf9 !important;
}

.notification-dropdown-item.is-new {
    border-left: 4px solid rgba(220, 53, 69, .55) !important;
    background: #fff0f0 !important;
}

.notification-item-icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #eaf7f4 !important;
    font-size: 19px !important;
}

.notification-item-body {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.notification-item-body strong {
    color: #173d38 !important;
    font-size: 14px !important;
}

.notification-item-body span,
.notification-item-body small {
    color: #647c78 !important;
    font-size: 12px !important;
}

.notification-all-link {
    display: block !important;
    padding: 14px 16px !important;
    background: #f7fbfa !important;
    color: #0b5d54 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-decoration: none !important;
}

.notification-loading,
.notification-empty {
    padding: 28px 20px !important;
    color: #6d827e !important;
    text-align: center !important;
    font-size: 13px !important;
}

@media (max-width: 900px) {
    .notification-dropdown {
        position: fixed !important;
        top: 76px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
    }
}

/* Fase 12 - Notifikationscenter 2.0 */
.notification-center-page{padding:34px 0 70px}.notification-center-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;padding:28px;border:1px solid #dbece8;border-radius:24px;background:linear-gradient(135deg,#f7fffd,#eaf8f5)}.notification-center-hero h1{margin:4px 0 8px;color:#173d38}.notification-center-hero p{margin:0;color:#657d79}.notification-center-stats{display:flex;gap:10px}.notification-center-stats span{min-width:92px;padding:12px 16px;border-radius:16px;background:#fff;color:#607873;text-align:center;box-shadow:0 8px 24px rgba(15,89,78,.08)}.notification-center-stats strong{display:block;color:#0b5d54;font-size:22px}.notification-center-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.notification-filter-tabs{display:flex;gap:8px;overflow-x:auto;padding:3px}.notification-filter-tabs a{white-space:nowrap;padding:9px 13px;border:1px solid #dcebe8;border-radius:999px;background:#fff;color:#58716c;font-size:13px;font-weight:800;text-decoration:none}.notification-filter-tabs a.is-active{border-color:#0b6d61;background:#0b6d61;color:#fff}.notification-center-actions{display:flex;align-items:center;gap:8px}.notification-center-actions form{margin:0}.btn-danger-soft{border:1px solid #f0c8c8;background:#fff5f5;color:#b83d3d}.notification-center-list{overflow:hidden;border:1px solid #dfece9;border-radius:20px;background:#fff;box-shadow:0 12px 36px rgba(20,63,56,.08)}.notification-center-item{position:relative;display:flex;border-bottom:1px solid #edf3f2}.notification-center-item:last-child{border-bottom:0}.notification-center-item.is-unread{background:#f1fbf8}.notification-center-main{display:flex;align-items:center;gap:14px;flex:1;padding:17px 18px;color:inherit;text-decoration:none}.notification-center-main:hover{background:rgba(232,248,244,.65)}.notification-center-icon{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#eaf7f4;font-size:21px}.notification-center-copy{display:grid;gap:4px;min-width:0}.notification-center-copy strong{color:#173d38}.notification-center-copy span,.notification-center-copy small{color:#687f7b;font-size:13px}.notification-unread-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#df3c45}.notification-delete-button{width:44px;height:100%;border:0;border-left:1px solid #edf3f2;background:transparent;color:#8c9e9a;font-size:25px;cursor:pointer}.notification-delete-button:hover{background:#fff1f1;color:#c73939}.notification-settings-card{padding:26px}.notification-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.notification-settings-head h2{margin:4px 0 6px}.notification-settings-head p{margin:0;color:#6a817d}.notification-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.notification-choice{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid #deebe8;border-radius:17px;background:#fbfefd;cursor:pointer}.notification-choice:hover{border-color:#a8d4cb}.notification-choice-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eaf7f4;font-size:20px}.notification-choice-copy{display:grid;gap:3px;flex:1}.notification-choice-copy strong{color:#183e38}.notification-choice-copy small{color:#6c827e;font-size:12px}.notification-switch{position:relative;flex:0 0 48px;width:48px;height:28px}.notification-switch input{position:absolute;opacity:0}.notification-switch span{position:absolute;inset:0;border-radius:999px;background:#cad8d5;transition:.2s}.notification-switch span:after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.2s}.notification-switch input:checked+span{background:#0b6d61}.notification-switch input:checked+span:after{transform:translateX(20px)}.notification-settings-actions{display:flex;justify-content:flex-end;margin-top:20px}
@media(max-width:760px){.notification-center-page{padding:20px 12px 95px}.notification-center-hero{align-items:flex-start;flex-direction:column;padding:20px}.notification-center-stats{width:100%}.notification-center-stats span{flex:1}.notification-center-toolbar{align-items:stretch;flex-direction:column}.notification-center-actions{overflow-x:auto}.notification-choice-grid{grid-template-columns:1fr}.notification-settings-head{flex-direction:column}.notification-center-main{padding:14px 12px}.notification-center-icon{flex-basis:42px;width:42px;height:42px}.notification-delete-button{width:40px}}