/* =====================================================================
   DIVINE LIFE DAMAYAN — Design System
   Pine green + marigold amber on warm paper. Bootstrap 5 themed.
   ===================================================================== */
:root{
  --dl-pine:#1d6a59; --dl-pine-deep:#134c40; --dl-pine-darker:#0d352c;
  --dl-amber:#f4a522; --dl-amber-soft:#ffd27a; --dl-amber-deep:#d98a0c;
  --dl-cream:#f7f1e6; --dl-paper:#fbf7f0; --dl-sand:#efe6d4;
  --dl-ink:#19231e; --dl-muted:#5d6b62; --dl-line:#e7ddcc;
  --dl-danger:#c0392b; --dl-success:#1d6a59; --dl-info:#2a7fb8; --dl-warn:#d98a0c;
  --dl-serif:'Fraunces',Georgia,serif;
  --dl-sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --dl-shadow:0 2px 14px rgba(19,76,64,.07);
  --dl-shadow-lg:0 18px 50px rgba(13,53,44,.18);
}
*{ scroll-behavior:smooth; }
body{
  font-family:var(--dl-sans);
  background:
    radial-gradient(1200px 480px at 100% -10%, rgba(244,165,34,.06), transparent 60%),
    var(--dl-paper);
  color:var(--dl-ink);
  min-height:100vh;
}
h1,h2,h3,h4,h5{ font-family:var(--dl-serif); font-weight:600; letter-spacing:-.01em; color:var(--dl-pine-darker); }
h1{ font-size:clamp(1.6rem,2.4vw,2.1rem); }
a{ color:var(--dl-pine); text-decoration:none; }
a:hover{ color:var(--dl-pine-deep); }
.text-muted{ color:var(--dl-muted)!important; }

/* ---- Buttons ---- */
.btn{ border-radius:999px; font-weight:600; padding-inline:1.2rem; transition:transform .12s ease, box-shadow .12s ease, background .15s ease; }
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding-inline:.85rem; }
.btn-primary{ --bs-btn-bg:var(--dl-pine);--bs-btn-border-color:var(--dl-pine);
  --bs-btn-hover-bg:var(--dl-pine-deep);--bs-btn-hover-border-color:var(--dl-pine-deep);
  --bs-btn-active-bg:var(--dl-pine-deep);--bs-btn-disabled-bg:var(--dl-pine);--bs-btn-color:#fff;}
.btn-success{ --bs-btn-bg:var(--dl-amber);--bs-btn-border-color:var(--dl-amber);
  --bs-btn-color:#2a1c00;--bs-btn-hover-bg:var(--dl-amber-deep);
  --bs-btn-hover-border-color:var(--dl-amber-deep);--bs-btn-hover-color:#2a1c00;
  --bs-btn-active-bg:var(--dl-amber-deep);--bs-btn-active-color:#2a1c00;}
.btn-outline-primary{ --bs-btn-color:var(--dl-pine);--bs-btn-border-color:var(--dl-pine);
  --bs-btn-hover-bg:var(--dl-pine);--bs-btn-hover-border-color:var(--dl-pine);--bs-btn-active-bg:var(--dl-pine-deep);}
.btn-outline-danger{ --bs-btn-color:var(--dl-danger);--bs-btn-border-color:var(--dl-danger);
  --bs-btn-hover-bg:var(--dl-danger);--bs-btn-hover-border-color:var(--dl-danger);}

/* ---- Cards & forms ---- */
.card{ border:1px solid var(--dl-line); box-shadow:var(--dl-shadow); border-radius:16px; background:#fff; }
.form-control,.form-select{ border-radius:10px; padding:.6rem .8rem; border-color:var(--dl-line); }
.form-control:focus,.form-select:focus{ border-color:var(--dl-pine); box-shadow:0 0 0 .2rem rgba(29,106,89,.15); }
.form-label{ font-weight:600; font-size:.9rem; color:var(--dl-ink); }
.alert{ border-radius:12px; border:0; }
.input-group-text{ background:var(--dl-cream); border-color:var(--dl-line); color:var(--dl-pine-deep); }
.is-valid{ border-color:var(--dl-success)!important; }
.is-invalid{ border-color:var(--dl-danger)!important; }

/* ---- Badges ---- */
.badge{ font-weight:600; letter-spacing:.01em; border-radius:999px; padding:.4em .7em; }
.position-badge{ color:#fff; }

/* ---- Avatars ---- */
.dl-avatar{ border-radius:50%; object-fit:cover; display:inline-flex; align-items:center;
  justify-content:center; vertical-align:middle; background:var(--dl-sand); border:1px solid var(--dl-line); flex:0 0 auto; }
.dl-avatar-initials{ background:linear-gradient(135deg,var(--dl-pine),var(--dl-pine-deep)); color:#fff;
  font-weight:700; font-family:var(--dl-sans); border:0; }

/* =====================================================================
   APP TOP NAVBAR (admin + user)
   ===================================================================== */
.app-nav{ background:#fff; border-bottom:1px solid var(--dl-line); box-shadow:0 1px 16px rgba(19,76,64,.06);
  padding-block:.45rem; position:sticky; top:0; z-index:1030; }
.app-nav .navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.app-nav .brand-logo{ height:40px; width:auto; }
.app-nav .brand-title{ font-family:var(--dl-serif); font-weight:700; font-size:1.02rem; color:var(--dl-pine-deep); line-height:1; }
.app-nav .brand-sub{ font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dl-amber-deep); }
.app-nav .nav-link{ color:var(--dl-ink); font-weight:500; padding:.5rem .85rem; border-radius:9px; display:flex; align-items:center; gap:.4rem; }
.app-nav .nav-link i{ font-size:1rem; opacity:.85; }
.app-nav .nav-link:hover{ color:var(--dl-pine); background:var(--dl-cream); }
.app-nav .nav-link.active{ color:var(--dl-pine-deep); background:rgba(29,106,89,.1); font-weight:600; }
.app-nav .navbar-toggler{ border-color:var(--dl-line); padding:.35rem .55rem; }
.app-nav .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(29,106,89,.15); }
.app-nav .navbar-toggler-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231d6a59' stroke-width='2.2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); }

/* user menu */
.dl-usermenu .dropdown-toggle{ display:flex; align-items:center; gap:.55rem; background:transparent; border:1px solid var(--dl-line);
  border-radius:999px; padding:.25rem .7rem .25rem .3rem; color:var(--dl-ink); font-weight:600; }
.dl-usermenu .dropdown-toggle::after{ margin-left:.15rem; }
.dropdown-menu{ border:1px solid var(--dl-line); border-radius:14px; box-shadow:var(--dl-shadow-lg); padding:.4rem; }
.dropdown-item{ border-radius:9px; padding:.55rem .7rem; font-weight:500; }
.dropdown-item:active{ background:var(--dl-pine); }

/* =====================================================================
   NOTIFICATION BELL + DROPDOWN
   ===================================================================== */
.dl-bell{ position:relative; border:1px solid var(--dl-line); background:#fff; width:42px; height:42px;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--dl-pine-deep);
  font-size:1.15rem; cursor:pointer; transition:background .15s ease; }
.dl-bell:hover{ background:var(--dl-cream); }
.dl-bell .dl-bell-count{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  background:var(--dl-danger); color:#fff; border-radius:999px; font-size:.66rem; font-weight:700;
  display:none; align-items:center; justify-content:center; border:2px solid #fff; line-height:1; }
.dl-bell .dl-bell-count.show{ display:inline-flex; }
.dl-bell.ring{ animation:dl-ring .6s ease; }
@keyframes dl-ring{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(14deg)} 40%{transform:rotate(-12deg)} 60%{transform:rotate(8deg)} 80%{transform:rotate(-4deg)} }

.dl-notif-panel{ width:360px; max-width:92vw; padding:0; overflow:hidden; }
.dl-notif-head{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--dl-line); }
.dl-notif-head h6{ margin:0; font-family:var(--dl-sans); font-weight:700; }
.dl-notif-list{ max-height:60vh; overflow-y:auto; }
.dl-notif-item{ display:flex; gap:.7rem; padding:.75rem 1rem; border-bottom:1px solid var(--dl-cream); text-decoration:none; color:inherit; }
.dl-notif-item:hover{ background:var(--dl-cream); }
.dl-notif-item.unread{ background:rgba(244,165,34,.07); }
.dl-notif-ic{ width:36px; height:36px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.dl-notif-ic.success{ background:rgba(29,106,89,.12); color:var(--dl-pine); }
.dl-notif-ic.info{ background:rgba(42,127,184,.12); color:var(--dl-info); }
.dl-notif-ic.warning{ background:rgba(217,138,12,.14); color:var(--dl-warn); }
.dl-notif-ic.danger{ background:rgba(192,57,43,.12); color:var(--dl-danger); }
.dl-notif-ic.primary{ background:rgba(29,106,89,.12); color:var(--dl-pine); }
.dl-notif-body .t{ font-weight:700; font-size:.9rem; }
.dl-notif-body .m{ font-size:.83rem; color:var(--dl-muted); }
.dl-notif-body .ts{ font-size:.72rem; color:var(--dl-muted); margin-top:.15rem; }
.dl-notif-empty{ padding:2.2rem 1rem; text-align:center; color:var(--dl-muted); }

/* =====================================================================
   TOASTS + POPUP MODAL
   ===================================================================== */
.dl-toast-wrap{ position:fixed; top:1rem; right:1rem; z-index:1090; display:flex; flex-direction:column; gap:.6rem; max-width:92vw; }
.dl-toast{ display:flex; gap:.7rem; align-items:flex-start; background:#fff; border:1px solid var(--dl-line);
  border-left:5px solid var(--dl-pine); border-radius:12px; box-shadow:var(--dl-shadow-lg);
  padding:.8rem .9rem; width:340px; max-width:92vw; animation:dl-slide-in .3s ease; }
.dl-toast.success{ border-left-color:var(--dl-success); }
.dl-toast.info{ border-left-color:var(--dl-info); }
.dl-toast.warning{ border-left-color:var(--dl-warn); }
.dl-toast.danger{ border-left-color:var(--dl-danger); }
.dl-toast .ic{ font-size:1.25rem; line-height:1; margin-top:.1rem; }
.dl-toast.success .ic{ color:var(--dl-success);} .dl-toast.info .ic{ color:var(--dl-info);}
.dl-toast.warning .ic{ color:var(--dl-warn);} .dl-toast.danger .ic{ color:var(--dl-danger);}
.dl-toast .t{ font-weight:700; font-size:.92rem; }
.dl-toast .m{ font-size:.84rem; color:var(--dl-muted); }
.dl-toast .x{ margin-left:auto; border:0; background:transparent; color:var(--dl-muted); font-size:1.1rem; cursor:pointer; }
@keyframes dl-slide-in{ from{ opacity:0; transform:translateX(28px);} to{opacity:1; transform:translateX(0);} }
.dl-toast.leaving{ animation:dl-slide-out .25s ease forwards; }
@keyframes dl-slide-out{ to{ opacity:0; transform:translateX(28px);} }

/* one-time popup modal (built on bootstrap modal) */
.dl-popup .modal-content{ border:0; border-radius:18px; box-shadow:var(--dl-shadow-lg); overflow:hidden; }
.dl-popup .dl-popup-top{ padding:1.6rem 1.4rem .4rem; text-align:center; }
.dl-popup .dl-popup-ic{ width:64px; height:64px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center;
  justify-content:center; font-size:1.9rem; }
.dl-popup .dl-popup-ic.success{ background:rgba(29,106,89,.12); color:var(--dl-pine); }
.dl-popup .dl-popup-ic.info{ background:rgba(42,127,184,.12); color:var(--dl-info); }
.dl-popup .dl-popup-ic.warning{ background:rgba(217,138,12,.14); color:var(--dl-warn); }
.dl-popup .dl-popup-ic.danger{ background:rgba(192,57,43,.12); color:var(--dl-danger); }
.dl-popup .modal-body{ padding:0 1.6rem 1.4rem; text-align:center; }
.dl-popup h5{ font-family:var(--dl-sans); font-weight:800; margin-bottom:.3rem; }
.dl-popup p{ color:var(--dl-muted); margin-bottom:1.1rem; }

/* =====================================================================
   STAT CARDS
   ===================================================================== */
.stat-card{ border-radius:16px; background:#fff; border:1px solid var(--dl-line); padding:1.05rem 1.2rem;
  box-shadow:var(--dl-shadow); height:100%; position:relative; overflow:hidden; }
.stat-card small{ color:var(--dl-muted); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; font-weight:700; }
.stat-card h3{ font-size:1.7rem; margin:.25rem 0 0; color:var(--dl-pine-deep); }
.stat-card .stat-ic{ position:absolute; right:.9rem; top:.9rem; font-size:1.5rem; opacity:.18; color:var(--dl-pine); }

/* =====================================================================
   DATA TABLES (search / sort / paginate)
   ===================================================================== */
.dl-tablewrap{ background:#fff; border:1px solid var(--dl-line); border-radius:16px; box-shadow:var(--dl-shadow); overflow:hidden; }
.dl-tabletools{ display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:.9rem 1rem; border-bottom:1px solid var(--dl-line); }
.dl-search{ position:relative; flex:1; min-width:200px; max-width:360px; }
.dl-search i{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--dl-muted); }
.dl-search input{ width:100%; border:1px solid var(--dl-line); border-radius:999px; padding:.5rem .9rem .5rem 2.2rem; }
.dl-search input:focus{ outline:0; border-color:var(--dl-pine); box-shadow:0 0 0 .2rem rgba(29,106,89,.15); }
.dl-tablewrap table{ margin:0; }
.table{ --bs-table-bg:transparent; }
.table thead th{ color:var(--dl-muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:2px solid var(--dl-line); white-space:nowrap; }
.table td{ vertical-align:middle; border-color:var(--dl-cream); }
.table tbody tr:hover{ background:var(--dl-cream); }
th.dl-sortable{ cursor:pointer; user-select:none; }
th.dl-sortable .dl-sort-ic{ opacity:.4; margin-left:.25rem; font-size:.8rem; }
th.dl-sortable.asc .dl-sort-ic, th.dl-sortable.desc .dl-sort-ic{ opacity:1; color:var(--dl-pine); }
.dl-tablefoot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding:.75rem 1rem; border-top:1px solid var(--dl-line); }
.dl-pageinfo{ font-size:.82rem; color:var(--dl-muted); }
.dl-pager{ display:flex; gap:.3rem; }
.dl-pager button{ border:1px solid var(--dl-line); background:#fff; border-radius:8px; min-width:34px; height:34px; padding:0 .55rem;
  font-weight:600; color:var(--dl-ink); cursor:pointer; }
.dl-pager button:hover:not(:disabled){ background:var(--dl-cream); }
.dl-pager button.active{ background:var(--dl-pine); border-color:var(--dl-pine); color:#fff; }
.dl-pager button:disabled{ opacity:.45; cursor:default; }
.dl-noresults td{ text-align:center; color:var(--dl-muted); padding:2rem; }

/* clickable rows */
tr.dl-clickable{ cursor:pointer; }

/* =====================================================================
   PUBLIC SITE NAV + FOOTER (landing/about/contact)
   ===================================================================== */
.site-nav{ background:#fff; border-bottom:1px solid var(--dl-line); box-shadow:0 1px 16px rgba(19,76,64,.06); padding-block:.5rem; }
.site-brand{ display:flex; align-items:center; gap:.7rem; }
.site-brand .brand-logo{ height:48px; width:auto; }
.site-brand .brand-text{ display:flex; flex-direction:column; line-height:1.04; }
.site-brand .brand-title{ font-family:var(--dl-serif); font-weight:700; font-size:1.14rem; color:var(--dl-pine-deep); }
.site-brand .brand-sub{ font-size:.66rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--dl-amber); }
.site-nav .nav-link{ color:var(--dl-ink); font-weight:500; padding:.45rem .9rem; border-radius:8px; position:relative; }
.site-nav .nav-link:hover{ color:var(--dl-pine); }
.site-nav .btn-primary{ color:#fff; }
.site-footer{ background:var(--dl-pine-darker); color:rgba(247,241,230,.7); }

/* =====================================================================
   PRINTING (reports / codes)
   ===================================================================== */
@media print{
  .app-nav, .site-nav, .site-footer, .dl-bell, .dl-tabletools, .dl-tablefoot,
  .no-print, .btn, form{ display:none!important; }
  body{ background:#fff; }
  .card, .dl-tablewrap{ box-shadow:none; border-color:#ccc; }
  main{ padding:0!important; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:991px){
  .app-nav .navbar-nav{ padding-top:.5rem; gap:.1rem; }
  .app-nav .dl-nav-right{ margin-top:.5rem; }
}


/* ============================================
   NAVBAR WITH DROPDOWN - CLEAN & PROFESSIONAL
   ============================================ */

.app-nav {
    background: linear-gradient(135deg, #1a472a 0%, #2d6a4f 50%, #1a472a 100%);
    padding: 0;
    min-height: 64px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 1050;
    border-bottom: 3px solid #f4a460;
    width: 100%;
}

.app-nav .container-fluid {
    padding: 0 15px;
    max-width: 100%;
}

/* Brand */
.app-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    flex-shrink: 0;
}

.app-nav .navbar-brand .brand-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    padding: 3px;
}

.app-nav .navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.app-nav .navbar-brand .brand-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.app-nav .navbar-brand .brand-sub {
    font-size: 9px;
    font-weight: 600;
    color: #f4a460;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Navbar Links */
.app-nav .navbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.app-nav .nav-item {
    position: relative;
}

.app-nav .nav-link {
    color: rgba(255,255,255,0.8) !important;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.app-nav .nav-link i {
    font-size: 16px;
    opacity: 0.8;
}

.app-nav .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.1);
}

.app-nav .nav-link.active {
    color: #ffffff !important;
    background: rgba(244, 164, 96, 0.2);
    box-shadow: inset 0 -2px 0 #f4a460;
}

.app-nav .nav-link.active i {
    color: #f4a460;
}

/* Dropdown Toggle */
.app-nav .nav-link.dropdown-toggle {
    padding-right: 10px;
}

.app-nav .nav-link.dropdown-toggle::after {
    margin-left: 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}

/* Dropdown Menu */
.app-nav .dropdown-menu {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 8px 0;
    min-width: 180px;
    margin-top: 8px;
    border: 1px solid rgba(0,0,0,0.05);
}

.app-nav .dropdown-menu .dropdown-item {
    padding: 8px 20px;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.app-nav .dropdown-menu .dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #6c757d;
}

.app-nav .dropdown-menu .dropdown-item:hover {
    background: #f8f9fa;
    color: #1a472a;
}

.app-nav .dropdown-menu .dropdown-item:hover i {
    color: #1a472a;
}

.app-nav .dropdown-menu .dropdown-item.active {
    background: #e8f5e9;
    color: #1a472a;
    font-weight: 600;
}

.app-nav .dropdown-menu .dropdown-item.active i {
    color: #1a472a;
}

/* Right Side */
.app-nav .dl-nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Notification Bell */
.app-nav .dl-bell {
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.app-nav .dl-bell:hover {
    background: rgba(255,255,255,0.18);
}

.app-nav .dl-bell .dl-bell-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #dc3545;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1a472a;
    min-width: 18px;
}

/* User Menu */
.app-nav .dl-usermenu .dropdown-toggle {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 4px 12px 4px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 40px;
}

.app-nav .dl-usermenu .dropdown-toggle:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
}

.app-nav .dl-usermenu .dropdown-toggle .user-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav .dl-usermenu .dropdown-toggle .role-badge {
    background: #f4a460;
    color: #1a472a;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.app-nav .dl-usermenu .dropdown-menu {
    min-width: 200px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1199px) {
    .app-nav .nav-link {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .app-nav .nav-link i {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .app-nav .navbar-nav {
        flex-wrap: wrap;
        padding: 5px 0;
        gap: 2px;
        width: 100%;
    }
    
    .app-nav .nav-link {
        padding: 6px 12px;
        font-size: 13px;
        width: auto;
    }
    
    .app-nav .dl-nav-right {
        padding: 5px 0;
        width: 100%;
        justify-content: flex-end;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    
    .app-nav .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        background: rgba(255,255,255,0.05);
        border-radius: 8px;
        margin: 0;
        padding: 5px 0;
    }
    
    .app-nav .dropdown-menu .dropdown-item {
        color: rgba(255,255,255,0.8) !important;
        padding: 6px 16px 6px 40px;
    }
    
    .app-nav .dropdown-menu .dropdown-item:hover {
        background: rgba(255,255,255,0.1);
        color: #ffffff !important;
    }
    
    .app-nav .dropdown-menu .dropdown-item i {
        color: rgba(255,255,255,0.6) !important;
    }
    
    .app-nav .dropdown-menu .dropdown-item.active {
        background: rgba(244, 164, 96, 0.2);
        color: #ffffff !important;
    }
}

@media (max-width: 768px) {
    .app-nav .navbar-brand .brand-text {
        display: none !important;
    }
    
    .app-nav .navbar-brand .brand-logo {
        height: 32px;
    }
    
    .app-nav .dl-usermenu .dropdown-toggle .user-name {
        display: none;
    }
    
    .app-nav .dl-usermenu .dropdown-toggle {
        padding: 2px 6px 2px 2px;
        min-height: 34px;
    }
    
    .app-nav .dl-bell {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .app-nav .nav-link {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .app-nav .nav-link i {
        font-size: 12px;
    }
}