.notification-center{position:relative}
.notification-bell{position:relative;width:42px;height:42px;border:1px solid var(--line,#e4e1dc);border-radius:10px;background:var(--surface,#fff);color:#4b4946;display:grid;place-items:center;padding:0}
.notification-bell:hover,.notification-bell:focus-visible{color:#c96d12;border-color:#f28c28;background:#fff7ef;outline:3px solid rgba(242,140,40,.16)}
.notification-bell svg{width:21px;height:21px}
.notification-badge{position:absolute;right:-6px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#c7423a;color:#fff;border:2px solid var(--surface,#fff);font-size:11px;font-weight:700;line-height:16px;text-align:center}
.notification-popover{position:absolute;right:0;top:50px;width:min(430px,calc(100vw - 28px));max-height:min(650px,calc(100vh - 90px));overflow:hidden;border:1px solid var(--line,#e4e1dc);border-radius:14px;background:var(--surface,#fff);box-shadow:0 18px 55px rgba(43,42,40,.18);z-index:1400}
.notification-popover-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line,#e4e1dc)}
.notification-popover-head h3{margin:0;font-size:16px}
.notification-popover-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.notification-popover-head .notification-popover-actions button{border:1px solid transparent;border-radius:7px;padding:6px 8px;font-weight:600;white-space:nowrap}
.notification-popover-head .notification-popover-actions button[data-push-toggle]{border-color:#efc79f;background:#fff7ef;color:#a85300}
.notification-popover-head .notification-popover-actions button.notification-push-active{border-color:var(--line,#dedad4);background:var(--surface-muted,#f5f3f0);color:var(--muted,#6f6b66)}
.notification-popover-head .notification-popover-actions button:disabled{opacity:.55;cursor:wait}
body.theme-dark .notification-popover-head .notification-popover-actions button[data-push-toggle]{border-color:#694623;background:#322d28;color:#f2a356}
.notification-popover-head button{border:0;background:none;color:#c96d12;padding:5px;font-size:12px}
.notification-list{max-height:540px;overflow:auto}
.notification-item{display:flex;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line,#eee);background:var(--surface,#fff)}
.notification-item.unread{background:#fff7ef}
.notification-item-icon{width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:#fff0e1;color:#d26d0b;display:grid;place-items:center}
.notification-item-icon .ui-icon{width:19px;height:19px}
.notification-item-body{min-width:0;flex:1}
.notification-item-body strong{display:block;font-size:13px;color:var(--text,#2b2a28)}
.notification-vehicle{display:block;margin-top:3px;font-size:12px;color:#4c4844}
.notification-item-body p{margin:4px 0 6px;font-size:12px;line-height:1.45;color:var(--muted,#6f6b66)}
.notification-item-body small{color:#918b85;font-size:11px}
.notification-item-actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.notification-item-actions button{border:0;background:none;padding:0;color:#c96d12;font-size:11px;font-weight:700}
.notification-empty{padding:35px 20px;text-align:center;color:var(--muted,#777)}
#notification-toasts{position:fixed;right:24px;top:82px;z-index:1800;display:flex;flex-direction:column;gap:10px;width:min(390px,calc(100vw - 32px))}
.notification-toast{position:relative;border:1px solid #f0d5b8;border-left:4px solid #f28c28;border-radius:12px;background:var(--surface,#fff);box-shadow:0 14px 40px rgba(43,42,40,.18);padding:16px 42px 15px 17px;animation:notification-in .22s ease-out}
@keyframes notification-in{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.notification-toast-head{display:flex;align-items:center;gap:8px;color:#2b2a28}
.notification-toast-head .ui-icon{color:#d36e0b;width:19px;height:19px}
.notification-toast p{margin:7px 0 10px;font-size:13px;line-height:1.45;color:var(--muted,#666)}
.notification-toast-close{position:absolute;right:10px;top:7px;border:0;background:none;font-size:22px;color:#888}
.notification-toast-map{border:0;border-radius:7px;background:#f28c28;color:#fff;font-weight:700;padding:7px 10px}
.notification-rules-page .panel-head{align-items:flex-start}
.panel-subtitle{margin:5px 0 0;color:var(--muted,#777);font-size:13px}
.notification-rule-help{margin:16px 0;padding:12px 14px;border-radius:9px;background:#faf7f3;color:#68635e;font-size:13px}
.table-secondary{display:block;color:#8b857e;font-size:11px;font-weight:400;margin-top:4px}
.notification-channel{display:inline-block;padding:4px 7px;border-radius:6px;background:#efede9;color:#8c8781;font-size:11px}
.notification-channel.active{background:#fff0e1;color:#b85f09;font-weight:700}
.notification-status{border:0;border-radius:16px;padding:6px 10px;font-weight:700;font-size:11px}
.notification-status.enabled{background:#e4f4ed;color:#167856}
.notification-status.disabled{background:#efede9;color:#77716b}
.empty-table{text-align:center!important;padding:32px!important;color:#888}
.notification-rule-dialog{width:min(900px,calc(100vw - 30px));max-width:900px}
.notification-rule-form{padding:8px}
.notification-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.notification-form-grid>label,.notification-condition-fields>label{display:flex;flex-direction:column;gap:7px;color:#625d58;font-size:13px}
.notification-condition-fields{grid-column:1/-1}
.notification-condition-fields>label{max-width:390px}
.notification-channels{display:flex;gap:24px;flex-wrap:wrap;margin:20px 0 8px;padding:14px 16px;border:1px solid var(--line,#e2dfda);border-radius:10px}
.notification-channels legend{font-weight:700;padding:0 6px}
.notification-channels label{display:flex;align-items:center;gap:7px}
.notification-schedule{display:grid;gap:7px}
.notification-schedule-row{display:grid;grid-template-columns:170px 135px 140px 140px;gap:12px;align-items:center;padding:10px 12px;background:#faf9f7;border-radius:8px}
.notification-schedule-row label{display:flex;align-items:center;gap:7px;color:#625d58;font-size:12px}
.notification-schedule-row input[type=time]{min-width:100px;padding:7px}
.notification-day{font-weight:700}
.form-hint{margin:7px 0;color:#807a74;font-size:12px;line-height:1.45}
.notification-template-list{display:grid;gap:12px}
.notification-template-group{display:grid;gap:10px;margin-top:18px}
.notification-template-group:first-of-type{margin-top:0}
.notification-template-group>h4{margin:0;color:var(--ink);font-size:14px}
.notification-template-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:17px;border:1px solid var(--line,#e4e1dc);border-radius:11px;background:var(--surface,#fff)}
.notification-template-card h4,.notification-template-card h5{margin:0 0 5px;font-size:14px}
.notification-template-card p{margin:0;color:var(--muted,#777);font-size:12px}
.notification-template-editor{display:grid;gap:15px;padding:8px}
.notification-editor-toolbar{display:flex;gap:5px;flex-wrap:wrap;padding:8px;background:#f5f3f0;border:1px solid #dedad4;border-bottom:0;border-radius:9px 9px 0 0}
.notification-editor-toolbar button{min-width:34px;border:1px solid #d9d4ce;background:#fff;border-radius:5px;padding:6px 8px;color:#393633}
.notification-html-editor{min-height:260px;max-height:460px;overflow:auto;border:1px solid #dedad4;border-radius:0 0 9px 9px;padding:18px;background:#fff;color:#2b2a28;line-height:1.55}
.notification-variable-list{display:flex;gap:6px;flex-wrap:wrap}
.notification-variable-list button{border:1px solid #f0c99e;background:#fff7ef;color:#a85300;border-radius:14px;padding:5px 9px;font-family:monospace;font-size:11px}
.notification-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.notification-preview-frame{width:100%;height:520px;border:1px solid #dedad4;border-radius:10px;background:#fff}
.notification-preview-popup{padding:16px;border-left:4px solid #f28c28;background:#fff7ef;border-radius:7px;color:#403c38}
body.theme-dark .notification-item.unread,body.theme-dark .notification-rule-help{background:#322d28}
body.theme-dark .notification-schedule-row,body.theme-dark .notification-editor-toolbar{background:#302d29}
body.theme-dark .notification-html-editor{background:#fff;color:#2b2a28}
.notification-select-col{width:42px;text-align:center!important}
.notification-select-col .row-check{width:17px;height:17px;accent-color:#f28c28;cursor:pointer}
.notification-form-success{min-height:18px;color:#167856;font-size:13px;font-weight:700;margin-top:6px}
.notification-rules-page .client-toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){
  #notification-toasts{right:16px;top:72px}
  .notification-form-grid{grid-template-columns:1fr}
  .notification-schedule-row{grid-template-columns:1fr 1fr}
  .notification-preview-grid{grid-template-columns:1fr}
  .notification-popover{position:fixed;right:14px;top:65px}
}

@media(max-width:480px){.notification-popover-head{align-items:flex-start}.notification-popover-actions{flex-direction:column;align-items:flex-end;gap:3px}}


.notification-page{display:grid;gap:18px;max-width:100%;min-width:0;color:var(--text,#2b2a28)}
.notification-page>.panel{min-width:0;margin-top:0}
.notification-page-tabs{display:flex;gap:4px;max-width:100%;overflow-x:auto;margin:0;padding:0 14px;border-bottom:1px solid var(--line,#dedbd7);border-radius:14px 14px 0 0;background:var(--surface,#fff);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.notification-page-tabs::-webkit-scrollbar{display:none}
.notification-page-tabs button{flex:0 0 auto;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted,#6f6b67);font-weight:600;padding:16px 18px;white-space:nowrap}
.notification-page-tabs button:hover{background:var(--surface-accent,rgba(242,140,40,.08));color:var(--orange-dark,#bd5d00)}
.notification-page-tabs button.active{border-bottom-color:#f28c28;color:#bd5d00;background:rgba(242,140,40,.08);font-weight:600}
.notification-history-list{margin-top:18px;border:1px solid var(--line,#e4e1dc);border-radius:12px;overflow:hidden}
.notification-history-list .notification-item{padding:17px 19px}
.notification-history-list .notification-item.selected{position:relative;background:var(--surface-accent,#fff3e8);box-shadow:inset 4px 0 0 #f28c28}
.notification-history-list .notification-item.selected:after{content:"Wybrane";align-self:flex-start;margin-left:auto;padding:4px 8px;border-radius:99px;background:#f28c28;color:#fff;font-size:10px;font-weight:800}
:root[data-theme="dark"] .notification-history-list .notification-item.selected{background:var(--surface-accent,#3a3028)}
@media(max-width:760px){.notification-page-tabs{padding:0 5px}.notification-page-tabs button{padding:13px 12px}.notification-history-page .panel-head{align-items:stretch;flex-direction:column}.notification-history-page .client-toolbar{justify-content:stretch}.notification-history-page .client-toolbar button{flex:1}.notification-history-list .notification-item.selected:after{display:none}}


.notification-event-check{display:flex;align-items:flex-start;padding-top:9px;flex:0 0 auto}
.notification-event-check input,.notification-select-all input{width:17px;height:17px;accent-color:#f28c28;cursor:pointer}
.notification-select-all{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line,#dedad4);border-radius:8px;background:var(--surface,#fff);color:var(--text,#2b2a28);font-size:12px;font-weight:700;white-space:nowrap}
.notification-item-actions .notification-delete-action{color:#b93c34}
.notification-history-toolbar{align-items:center}
@media(max-width:760px){.notification-history-toolbar{display:grid!important;grid-template-columns:1fr 1fr}.notification-history-toolbar .notification-select-all{justify-content:center}.notification-history-toolbar button{width:100%}.notification-event-check{padding-top:7px}}

/* Professional notification center 2026-08-02 */
.notification-popover{width:min(460px,calc(100vw - 28px));border-radius:16px;box-shadow:0 20px 60px rgba(43,42,40,.2)}
.notification-popover-head{display:block;padding:0;background:var(--surface,#fff)}
.notification-popover-heading{display:flex;align-items:center;gap:12px;padding:16px 18px 13px}
.notification-popover-title-icon{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;background:var(--surface-accent,#fff1e4);color:var(--orange-dark,#b85f09)}
.notification-popover-title-icon svg{width:20px;height:20px}
.notification-popover-heading>div{min-width:0;flex:1}
.notification-popover-heading h3{margin:0;color:var(--text,#2b2a28);font-size:16px;line-height:1.25}
.notification-popover-heading p{margin:3px 0 0;color:var(--muted,#77716b);font-size:12px;line-height:1.35}
.notification-popover-close{width:32px;height:32px;flex:0 0 32px;border:0!important;border-radius:8px!important;display:grid;place-items:center;padding:0!important;background:transparent!important;color:var(--muted,#77716b)!important;font-size:22px!important;font-weight:400!important;line-height:1}
.notification-popover-close:hover,.notification-popover-close:focus-visible{background:var(--surface-soft,#f3f1ee)!important;color:var(--text,#2b2a28)!important;outline:2px solid rgba(242,140,40,.18)}
.notification-popover-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px 12px;border-top:1px solid var(--line,#e8e4df);background:var(--surface-soft,#faf9f7)}
.notification-popover-head .notification-popover-actions button{min-height:34px;border-radius:8px;padding:7px 11px;font-size:12px;line-height:1.2}
.notification-popover-head .notification-popover-actions .notification-push-button{border:1px solid #efc79f;background:var(--surface-accent,#fff1e4);color:var(--orange-dark,#a85300)}
.notification-popover-head .notification-popover-actions .notification-read-button{margin-left:auto;border:1px solid transparent;background:transparent;color:var(--orange-dark,#b85f09)}
.notification-popover-head .notification-popover-actions .notification-read-button:hover{border-color:var(--line,#dedad4);background:var(--surface,#fff)}
.notification-list{max-height:520px;background:var(--surface,#fff)}
.notification-empty{min-height:205px;padding:34px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted,#77716b)}
.notification-empty-icon{width:50px;height:50px;margin-bottom:14px;border-radius:50%;display:grid;place-items:center;background:var(--surface-soft,#f5f3f0);color:var(--muted,#77716b)}
.notification-empty-icon .ui-icon{width:23px;height:23px}
.notification-empty strong{display:block;color:var(--text,#2b2a28);font-size:14px;line-height:1.3}
.notification-empty p{max-width:310px;margin:7px 0 0;font-size:12px;line-height:1.5}
.notification-loading{gap:10px}
.notification-loading-ring{width:28px;height:28px;border:3px solid var(--line,#e4e1dc);border-top-color:#f28c28;border-radius:50%;animation:notification-loading-spin .8s linear infinite}
.notification-empty-error .notification-empty-icon{background:#fcebea;color:#b93c34;font-weight:800}
@keyframes notification-loading-spin{to{transform:rotate(360deg)}}
:root[data-theme="dark"] .notification-popover-head .notification-popover-actions .notification-push-button{border-color:#694623;background:#322d28;color:#f2a356}
@media(max-width:480px){
  .notification-popover{right:8px!important;width:calc(100vw - 16px)!important;border-radius:14px}
  .notification-popover-heading{padding:14px}
  .notification-popover-actions{display:grid;grid-template-columns:1fr;padding:10px 14px;gap:8px;align-items:stretch}
  .notification-popover-head .notification-popover-actions button{width:100%;margin:0!important}
  .notification-empty{min-height:180px;padding:28px 20px}
}
/* Admin notification rule filters 2026-08-02 */
.notification-rule-filters{display:grid;grid-template-columns:minmax(260px,1.8fr) repeat(5,minmax(130px,1fr));gap:10px;margin:0 0 16px;padding:14px;border:1px solid var(--line,#e4e1dc);border-radius:11px;background:var(--surface-soft,#f8f7f5)}
.notification-rule-filters label{display:grid;gap:6px;min-width:0;color:var(--muted,#716c67);font-size:11px;font-weight:700}
.notification-rule-filters input,.notification-rule-filters select{width:100%;min-width:0;height:40px;margin:0;padding:0 11px;border:1px solid var(--line,#dcd8d2);border-radius:8px;background:var(--surface,#fff);color:var(--text,#2b2a28);font:inherit;font-size:12px;font-weight:500}
.notification-rule-filters input:focus,.notification-rule-filters select:focus{border-color:#f28c28;outline:3px solid rgba(242,140,40,.12)}
.notification-rule-filter-summary{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-height:30px;color:var(--muted,#77716b);font-size:12px}
.notification-rule-filter-summary button{padding:7px 10px}
:root[data-theme="dark"] .notification-rule-filters{background:var(--surface-soft,#302f2d);border-color:var(--line,#46433f)}
@media(max-width:1250px){.notification-rule-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.notification-rule-search{grid-column:span 2}}
@media(max-width:700px){.notification-rule-filters{grid-template-columns:1fr}.notification-rule-search{grid-column:auto}.notification-rule-filter-summary{align-items:stretch;flex-direction:column;gap:8px}.notification-rule-filter-summary button{width:100%}}