/* ══════════ HEADER ════════════ */
 .app-header {
     position: sticky;
     top: 0;
     z-index: 300;
     height: var(--header-h);
     /* background: var(--card-bg); */
     background-color: #f5a623;
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     padding: 0 22px;
     gap: 16px;
     box-shadow: var(--shadow-sm);
 }

 .header-menu-btn {
     width: 36px;
     height: 36px;
     background: #fff;
     border: 1.5px solid var(--border);
     border-radius: 9px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--dark);
     font-size: 0.85rem;
     transition: all 0.18s;
     flex-shrink: 0;
 }

 .header-menu-btn:hover {
     border-color: var(--orange);
     color: var(--orange);
 }

 .header-breadcrumb {
     flex: 1;
     min-width: 0;
 }

 .header-page-title {
        border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text);
    background-color: #fff;
    padding: 10px 20px;
 }

 .header-right {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .header-date {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 0.85rem;
     color: #fff;
     font-family: 'Poppins', sans-serif;
     white-space: nowrap;
 }

 .hd-sep {
     opacity: 0.4;
 }

 /* Icon button */
 .icon-btn {
     width: 36px;
     height: 36px;
     border: 1.5px solid var(--border);
     background: transparent;
     border-radius: 9px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--muted);
     font-size: 0.88rem;
     position: relative;
     transition: all 0.18s;
 }

 .icon-btn:hover {
     border-color: var(--orange);
     color: var(--orange);
 }

 /* Notification dot */
 .notif-dot {
     position: absolute;
     top: 6px;
     right: 6px;
     width: 7px;
     height: 7px;
     background: var(--red);
     border-radius: 50%;
     border: 1.5px solid #fff;
 }

 .notif-dot.pulse {
     animation: pulse-ring 2s infinite;
 }

 @keyframes pulse-ring {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.4;
     }
 }

 /* Notification dropdown */
 .header-notif {
     position: relative;
     display: none;
 }

 .notif-dropdown {
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
     width: 320px;
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     box-shadow: var(--shadow-md);
     z-index: 600;
     display: none;
     overflow: hidden;
 }

 .notif-dropdown.show {
     display: block;
 }

 .nd-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 16px 12px;
     border-bottom: 1px solid var(--border);
     font-family: 'Montserrat', sans-serif;
     font-size: 0.8rem;
     font-weight: 700;
     color: var(--text);
 }

 .nd-markall {
     background: none;
     border: none;
     font-family: 'Poppins', sans-serif;
     font-size: 0.7rem;
     color: var(--orange);
     cursor: pointer;
     padding: 0;
 }

 .nd-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 11px 16px;
     border-bottom: 1px solid var(--border);
     transition: background 0.15s;
     cursor: pointer;
 }

 .nd-item:last-child {
     border-bottom: none;
 }

 .nd-item:hover {
     background: var(--bg);
 }

 .nd-item.unread {
     background: rgba(245, 166, 35, 0.03);
 }

 .nd-icon {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.8rem;
     flex-shrink: 0;
 }

 .nd-icon.orange {
     background: rgba(245, 166, 35, 0.12);
     color: var(--orange);
 }

 .nd-icon.green {
     background: rgba(34, 197, 94, 0.12);
     color: var(--green);
 }

 .nd-icon.blue {
     background: rgba(37, 99, 235, 0.1);
     color: var(--accent);
 }

 .nd-icon.red {
     background: rgba(239, 68, 68, 0.1);
     color: var(--red);
 }

 .nd-body {
     flex: 1;
     min-width: 0;
 }

 .nd-title {
     font-family: 'Montserrat', sans-serif;
     font-size: 0.76rem;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 2px;
 }

 .nd-text {
     font-size: 0.7rem;
     color: var(--muted);
     line-height: 1.4;
 }

 .nd-time {
     font-size: 0.64rem;
     color: var(--light);
     margin-top: 2px;
 }

 .nd-footer {
     padding: 10px 16px;
     border-top: 1px solid var(--border);
     text-align: center;
     font-size: 0.72rem;
     color: var(--orange);
     font-family: 'Poppins', sans-serif;
 }

 /* Profile dropdown */
 .header-profile {
     position: relative;
     background-color: #fff;
     border-radius: 25px;
 }

 .profile-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 5px 10px 5px 5px;
     border: 1.5px solid var(--border);
     border-radius: 25px;
     background: transparent;
     cursor: pointer;
     transition: all 0.18s;
 }

 .profile-btn:hover {
     border-color: var(--orange);
 }

 .profile-avatar {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), var(--accent));
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Roboto', sans-serif;
     font-weight: 900;
     font-size: 0.65rem;
     color: #fff;
 }

 .profile-name {
     font-family: 'Montserrat', sans-serif;
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--text);
 }

 .profile-btn i {
     font-size: 0.6rem;
     color: var(--muted);
     transition: transform var(--transition);
 }

 .profile-btn.open i {
     transform: rotate(180deg);
 }

 .profile-dropdown {
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
     width: 220px;
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     box-shadow: var(--shadow-md);
     z-index: 600;
     display: none;
     overflow: hidden;
 }

 .profile-dropdown.show {
     display: block;
 }

 .pd-head {
     padding: 14px 16px 12px;
     border-bottom: 1px solid var(--border);
 }

 .pd-name {
     font-family: 'Montserrat', sans-serif;
     font-size: 0.85rem;
     font-weight: 700;
     color: var(--text);
 }

 .pd-role {
     font-size: 0.68rem;
     color: var(--muted);
     margin-top: 2px;
 }

 .profile-dropdown a {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 10px 16px;
     font-size: 0.78rem;
     color: var(--text);
     font-family: 'Poppins', sans-serif;
     transition: background 0.15s;
 }

 .profile-dropdown a:hover {
     background: var(--bg);
 }

 .profile-dropdown a i {
     width: 16px;
     color: var(--muted);
 }

 .pd-divider {
     height: 1px;
     background: var(--border);
     margin: 4px 0;
 }

 .logout-link {
     color: var(--red) !important;
 }