/* Employee notification inbox and detail; keep shared admin styles independent. */
#notificationCenterPage {
  --pf-brown:#482600; --pf-brown-light:#71441e; --pf-cream:#f4d6a6;
  --pf-bg:#fff5e6; --pf-yellow:#f8b62d; --pf-card:#f9e4c3;
  max-width:480px; padding:22px 15px 40px; background:var(--pf-bg); color:var(--pf-brown);
}
#notificationCenterPage .schedule-page-header { position:relative; display:flex; align-items:center; justify-content:center; min-height:48px; margin:0 0 24px; padding:0 44px; text-align:center; }
#notificationCenterPage .schedule-page-header h1 { margin:0; font-size:20px; line-height:28px; }
#notificationCenterPage .schedule-page-header p { margin:0 0 4px; font-size:11px; line-height:18px; color:var(--pf-brown-light); }
#notificationCenterPage #backFromNotificationsBtn { position:absolute; left:0; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--pf-cream); color:var(--pf-brown); font-size:20px; }
#notificationCenterPage .notification-toolbar { display:flex; flex-direction:column; align-items:flex-end; gap:12px; margin:0 0 16px; }
#notificationCenterPage .notification-filter-switch { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:6px; padding:5px; border-radius:28px; background:var(--pf-cream); }
#notificationCenterPage .notification-filter-switch button { min-height:36px; padding:8px 12px; border:0; border-radius:24px; background:transparent; color:var(--pf-brown-light); font-size:13px; font-weight:700; }
#notificationCenterPage .notification-filter-switch [aria-pressed="true"] { background:var(--pf-yellow); color:var(--pf-brown); }
#notificationCenterPage #notificationReadAllBtn { padding:8px 14px; border:1px solid #dfb77e; border-radius:24px; background:#fffdf9; color:var(--pf-brown); font-size:12px; }
#notificationCenterPage #notificationReadAllBtn:disabled { opacity:.5; }
#notificationCenterPage .notification-entry { gap:10px; margin:0 0 12px; padding:16px; border:1px solid #dfb77e; border-radius:20px; background:#fffdf9; box-shadow:none; color:var(--pf-brown); }
#notificationCenterPage .notification-entry.is-unread { padding-left:13px; border-left:4px solid var(--pf-yellow); background:linear-gradient(125deg,#fff8ed,var(--pf-card)); }
#notificationCenterPage .notification-meta { font-size:11px; line-height:20px; color:var(--pf-brown-light); }
#notificationCenterPage .notification-meta strong { display:inline-block; padding:2px 8px; border-radius:16px; background:var(--pf-yellow); color:var(--pf-brown); }
#notificationCenterPage .notification-entry > strong { font-size:15px; line-height:23px; }
#notificationCenterPage .notification-preview { font-size:12px; line-height:21px; color:var(--pf-brown-light); }
#notificationCenterPage #backToNotificationListBtn { margin:0 0 16px; padding:8px 14px; border:0; border-radius:24px; background:var(--pf-cream); color:var(--pf-brown); font-size:12px; }
#notificationCenterPage #notificationDetail { margin:0; padding:20px; border:1px solid #dfb77e; border-radius:20px; background:#fffdf9; box-shadow:none; }
#notificationCenterPage #notificationDetail > p:first-child { display:table; margin:0 0 12px; padding:5px 10px; border-radius:18px; background:var(--pf-cream); font-size:12px; line-height:20px; color:var(--pf-brown); }
#notificationCenterPage #notificationDetail h2 { margin:0 0 12px; font-size:18px; line-height:28px; color:var(--pf-brown); }
#notificationCenterPage #notificationDetail h2 + p { margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid #dfc6a5; font-size:11px; line-height:20px; color:var(--pf-brown-light); }
#notificationCenterPage .notification-content { font-size:14px; line-height:26px; color:var(--pf-brown); }
#notificationCenterPage .notification-empty { margin:0; padding:32px 18px; border:1px dashed #d9ba91; border-radius:20px; background:#fffdf9; text-align:center; box-shadow:none; }
#notificationCenterPage .notification-empty::before { content:'✓'; display:grid; place-items:center; width:40px; height:40px; margin:0 auto 14px; border-radius:50%; background:var(--pf-cream); color:var(--pf-brown); font-size:20px; }
#notificationCenterPage .notification-empty h2 { margin:0 0 10px; font-size:16px; }
#notificationCenterPage .notification-empty p { margin:0; font-size:12px; line-height:21px; color:var(--pf-brown-light); }
#notificationCenterPage button:focus-visible { outline:2px solid var(--pf-brown); outline-offset:3px; }