/* ==========================================================
 * App shell — sidebar, navbar, reminders dropdown & popup
 * Brand: Aishwaryam logo — leaf #166534, saffron #ea7208, marigold #f6b400, vermilion #db4a0e
 * Loaded on every page after custom.css; selectors stay scoped
 * to shell components so page content is unaffected.
 * ========================================================== */

:root {
    --pd-leaf: #166534;
    --pd-leaf-700: #12542b;
    --pd-leaf-900: #0a3519;
    --pd-red: #db4a0e;
    --pd-saffron: #ea7208;
    --pd-marigold: #f6b400;
    --pd-blue: #00569c;
    --pd-green: #1f9a4e;
    --pd-amber: #f2a900;
    --pd-ink: #17231b;
    --pd-ink-2: #4b5a50;
    --pd-ink-3: #87938a;
    --pd-line: #ece6da;
    --pd-soft: #f8f5ee;
    --pd-page: #faf7f0;
    --pd-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --pd-ease: cubic-bezier(.22, .8, .24, 1);
}

/* Warm ivory canvas instead of the template's cool grey */
body:not(.pl-body),
body:not(.pl-body) .layout-wrapper,
body:not(.pl-body) .layout-page,
body:not(.pl-body) .content-wrapper { background-color: var(--pd-page); }

/* ==========================================================
 * SIDEBAR
 * ========================================================== */
.layout-menu.pd-menu {
    background: #fff !important;
    border-right: 1px solid var(--pd-line);
    box-shadow: none !important;
}

.pd-menu .app-brand {
    position: relative;
    height: auto;
    min-height: 78px;
    margin-bottom: 6px;
    padding: 14px 1.1rem 12px !important;
}

/* Lotus-coloured rule under the brand */
.pd-menu .app-brand::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--pd-leaf), var(--pd-marigold) 55%, var(--pd-saffron) 80%, transparent);
    opacity: .5;
}

/* Brand lockup: lotus mark + wordmark, tagline in the logo's blue */
.pd-brand { display: flex; align-items: center; gap: 10px !important; padding-left: 0 !important; }

.pd-menu .pd-brand__mark { flex: 0 0 44px; width: 44px !important; height: auto !important; }

.pd-menu .pd-brand__mark img {
    display: block;
    width: 44px;
    max-width: none;
    height: auto;
    transition: transform .6s var(--pd-ease);
}

.pd-brand:hover .pd-brand__mark img { transform: rotate(-6deg) scale(1.06); }

.pd-menu .pd-brand__word { display: flex; flex-direction: column; gap: 3px; margin: 0 !important; }

.pd-menu .pd-brand__word img { display: block; width: 132px; max-width: none; height: auto; margin: 0; }

.pd-brand__word small {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--pd-blue);
    white-space: nowrap;
}

.pd-menu-label {
    margin: 10px 0 4px;
    padding: 0 1.6rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pd-ink-3);
}

.pd-menu .menu-inner > .menu-item {
    animation: pd-menu-in .5s var(--pd-ease) backwards;
}

.pd-menu .menu-inner > .menu-item:nth-child(1) { animation-delay: .04s; }
.pd-menu .menu-inner > .menu-item:nth-child(2) { animation-delay: .08s; }
.pd-menu .menu-inner > .menu-item:nth-child(3) { animation-delay: .12s; }
.pd-menu .menu-inner > .menu-item:nth-child(4) { animation-delay: .16s; }
.pd-menu .menu-inner > .menu-item:nth-child(5) { animation-delay: .2s; }

@keyframes pd-menu-in {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
}

.pd-menu .menu-inner > .menu-item > .menu-link {
    position: relative;
    margin: 0 .75rem;
    padding: .62rem .85rem;
    border-radius: 12px;
    color: var(--pd-ink-2) !important;
    font-weight: 500;
    transition: background .2s, color .2s, transform .25s var(--pd-ease);
}

.pd-menu .menu-inner > .menu-item > .menu-link .menu-icon {
    font-size: 1.25rem;
    color: var(--pd-ink-3);
    transition: color .2s, transform .25s var(--pd-ease);
}

.pd-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover {
    background: rgba(22, 101, 52, .06);
    color: var(--pd-leaf) !important;
    transform: translateX(2px);
}

.pd-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover .menu-icon {
    color: var(--pd-leaf);
    transform: scale(1.08);
}

/* Active: leaf pill with a marigold "bud" accent */
.pd-menu .menu-inner > .menu-item.active > .menu-link {
    background: linear-gradient(120deg, var(--pd-leaf-900), var(--pd-leaf) 60%, #2e8b4a) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px -12px rgba(22, 101, 52, .8) !important;
}

.pd-menu .menu-inner > .menu-item.active > .menu-link .menu-icon { color: #fff; }

.pd-menu .menu-inner > .menu-item.active > .menu-link::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: #ffb04d;
    box-shadow: 0 0 0 4px rgba(255, 176, 77, .25);
}

/* The template's edge bar sits outside the pill; the dot replaces it */
.layout-wrapper:not(.layout-horizontal) .pd-menu .menu-inner > .menu-item.active::before {
    display: none !important;
}

/* Signed-in user card */
.pd-menu-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: .75rem;
    padding: .65rem .7rem;
    border-radius: 14px;
    background: var(--pd-soft);
    border: 1px solid var(--pd-line);
}

.pd-menu-foot__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pd-leaf), #2e8b4a);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
}

.pd-menu-foot__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }

.pd-menu-foot__text strong {
    font-size: .84rem;
    color: var(--pd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-menu-foot__text small { font-size: .72rem; color: var(--pd-ink-3); }

.pd-menu-foot__logout {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--pd-ink-3);
    transition: background .2s, color .2s;
}

.pd-menu-foot__logout:hover { background: rgba(219, 74, 14, .08); color: var(--pd-red); }

/* Collapsed sidebar (desktop toggle) */
.layout-menu-collapsed:not(.layout-menu-hover) .pd-menu-label,
.layout-menu-collapsed:not(.layout-menu-hover) .pd-menu-foot__text,
.layout-menu-collapsed:not(.layout-menu-hover) .pd-menu-foot__logout { display: none; }

.layout-menu-collapsed:not(.layout-menu-hover) .pd-menu-foot {
    justify-content: center;
    padding: .5rem;
    background: transparent;
    border-color: transparent;
}

.layout-menu-collapsed:not(.layout-menu-hover) .pd-menu .menu-inner > .menu-item.active > .menu-link::after { display: none; }

/* ==========================================================
 * NAVBAR
 * ========================================================== */
.layout-navbar.pd-navbar {
    border: 1px solid var(--pd-line);
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .86) !important;
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 10px 30px -20px rgba(23, 35, 27, .35) !important;
}

.pd-navbar__title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }

.pd-navbar__title h5 {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pd-ink) !important;
}

.pd-navbar__title small { font-size: .74rem; color: var(--pd-ink-3); }

.pd-navbar__actions { gap: 10px; }

/* custom.css gives every .nav .nav-item a white card + shadow */
.pd-navbar .nav .nav-item,
.pd-navbar .navbar-nav .nav-item {
    background: transparent;
    box-shadow: none;
    margin-right: 0;
}

/* Reminders bell */
.pd-bell {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px !important;
    border-radius: 999px;
    border: 1px solid var(--pd-line);
    background: #fff;
    color: var(--pd-ink-2) !important;
    font-size: .84rem;
    font-weight: 600;
    transition: border-color .2s, box-shadow .2s, color .2s;
}

.pd-bell:hover,
.pd-bell[aria-expanded="true"] {
    border-color: rgba(22, 101, 52, .3);
    box-shadow: 0 6px 16px -10px rgba(22, 101, 52, .5);
    color: var(--pd-leaf) !important;
}

.pd-bell__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(22, 101, 52, .07);
    color: var(--pd-leaf);
    font-size: 1.15rem;
}

.pd-bell__count {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px !important;
    border: 2px solid #fff;
    background: var(--pd-red) !important;
    color: #fff;
    font-size: .64rem !important;
    line-height: 14px !important;
}

/* Pending reminders: ring pulse + occasional wiggle */
.pd-bell:has(.pd-bell__count:not(.d-none)) .pd-bell__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(219, 74, 14, .45);
    animation: pd-ring 2.4s ease-out infinite;
}

.pd-bell:has(.pd-bell__count:not(.d-none)) .pd-bell__icon i {
    transform-origin: 50% 10%;
    animation: pd-wiggle 6s ease-in-out infinite 1.5s;
}

@keyframes pd-ring {
    0% { transform: scale(1); opacity: 1; }
    80%, 100% { transform: scale(1.65); opacity: 0; }
}

@keyframes pd-wiggle {
    0%, 86%, 100% { transform: rotate(0); }
    88% { transform: rotate(14deg); }
    90% { transform: rotate(-12deg); }
    92% { transform: rotate(9deg); }
    94% { transform: rotate(-6deg); }
    96% { transform: rotate(3deg); }
}

/* User */
.pd-user {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 3px 10px 3px 3px !important;
    border-radius: 999px;
    transition: background .2s;
}

.pd-user:hover,
.pd-user[aria-expanded="true"] { background: var(--pd-soft); }
.pd-user .avatar { width: 36px; height: 36px; }

.pd-user__text { display: flex; flex-direction: column; line-height: 1.2; }
.pd-user__text strong { font-size: .84rem; color: var(--pd-ink); }
.pd-user__text small { font-size: .72rem; color: var(--pd-ink-3); }
.pd-user__chev { color: var(--pd-ink-3); font-size: .95rem; transition: transform .25s var(--pd-ease); }
.pd-user[aria-expanded="true"] .pd-user__chev { transform: rotate(180deg); }

/* Dropdowns */
.pd-navbar .dropdown-menu {
    border: 1px solid var(--pd-line);
    border-radius: 16px;
    box-shadow: 0 24px 48px -20px rgba(23, 35, 27, .35);
}

.pd-navbar .dropdown-menu.show { animation: pd-drop .22s var(--pd-ease); }

@keyframes pd-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.pd-user-menu { min-width: 250px; padding: 8px; }

.pd-user-menu__card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 12px;
    border-radius: 12px;
    background: var(--pd-soft);
}

.pd-user-menu .dropdown-item { border-radius: 10px; padding: .55rem .75rem; }
.pd-user-menu__logout:hover { background: rgba(219, 74, 14, .07) !important; color: var(--pd-red) !important; }

/* Notifications dropdown */
.pd-notify { width: 380px; max-width: calc(100vw - 24px); overflow: hidden; }

.pd-notify__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--pd-line);
}

.pd-notify__head h6 { font-weight: 700; color: var(--pd-ink); }
.pd-notify__head small { color: var(--pd-ink-3); font-size: .74rem; }

.pd-notify__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(22, 101, 52, .08);
    color: var(--pd-leaf);
    font-size: 1.1rem;
}

.pd-notify .dropdown-notifications-list { max-height: 360px; overflow-y: auto; }
.pd-notify #notification-list { padding: 6px; }
.pd-notify .notification-item { list-style: none; border-radius: 12px; transition: background .2s; }
.pd-notify .notification-item:hover { background: var(--pd-soft); }

.pd-notify__foot { padding: 10px 12px 12px; border-top: 1px solid var(--pd-line); }

.pd-notify__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(22, 101, 52, .07);
    color: var(--pd-leaf);
    font-weight: 600;
    font-size: .86rem;
    transition: background .2s;
}

.pd-notify__all:hover { background: rgba(22, 101, 52, .12); color: var(--pd-leaf); }
.pd-notify__all i { transition: transform .2s var(--pd-ease); }
.pd-notify__all:hover i { transform: translateX(3px); }

/* ==========================================================
 * REMINDER ROW (dropdown + popup)
 * ========================================================== */
.pd-remind-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
}

.pd-remind-when {
    flex: 0 0 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    background: rgba(22, 101, 52, .07);
    color: var(--pd-leaf);
}

.pd-remind-when strong { font-size: .78rem; font-weight: 700; }
.pd-remind-when small { margin-top: 2px; font-size: .66rem; font-weight: 600; opacity: .8; }

.pd-remind-row--overdue .pd-remind-when { background: rgba(219, 74, 14, .08); color: var(--pd-red); }
.pd-remind-row--upcoming .pd-remind-when { background: rgba(31, 154, 78, .09); color: var(--pd-green); }

.pd-remind-main { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; }
.pd-remind-main:hover .pd-remind-name { color: var(--pd-leaf); }

.pd-remind-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--pd-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.pd-remind-meta {
    font-size: .74rem;
    color: var(--pd-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-remind-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pd-red);
}

.pd-remind-actions { display: flex; gap: 6px; }

.pd-remind-action {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 1rem;
    transition: transform .2s var(--pd-ease), background .2s;
}

.pd-remind-action:hover { transform: scale(1.1); }
.pd-remind-action--call { color: var(--pd-green); background: rgba(31, 154, 78, .1); }
.pd-remind-action--call:hover { color: var(--pd-green); background: rgba(31, 154, 78, .18); }
.pd-remind-action--wa { color: #1fae57; background: rgba(37, 211, 102, .12); }
.pd-remind-action--wa:hover { color: #1fae57; background: rgba(37, 211, 102, .22); }

.pd-remind-empty {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 0;
    color: var(--pd-ink-3);
    font-size: .86rem;
}

.pd-remind-empty i { font-size: 1.8rem; color: var(--pd-green); }

/* ==========================================================
 * REMINDER POPUP
 * ========================================================== */
.pd-remind-modal .modal-dialog { max-width: 480px; }

.pd-remind-modal.fade .modal-dialog {
    transform: translateY(24px) scale(.96);
    transition: transform .4s var(--pd-ease);
}

.pd-remind-modal.show .modal-dialog { transform: none; }

.pd-remind-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 40px 80px -30px rgba(10, 53, 25, .55);
}

.pd-remind-modal__head {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px 14px;
    padding: 20px 20px 16px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(219, 74, 14, .35) 0%, rgba(219, 74, 14, 0) 50%),
        linear-gradient(135deg, var(--pd-leaf-900), var(--pd-leaf) 60%, #237a3e);
}

.pd-remind-modal__head .modal-title { color: #fff; font-weight: 700; font-size: 1.05rem; }
.pd-remind-modal__head small { color: rgba(255, 255, 255, .72); font-size: .78rem; }
/* Reset the template's floating white close button */
.pd-remind-modal .pd-remind-modal__head .btn-close {
    position: static;
    align-self: start;
    margin: 0;
    padding: .6rem;
    transform: none !important;
    border-radius: 10px;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: .75;
    transition: opacity .2s, background-color .2s;
}

.pd-remind-modal .pd-remind-modal__head .btn-close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, .15) !important;
}

.pd-remind-modal__bell {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 1.35rem;
}

.pd-remind-modal__bell i { transform-origin: 50% 10%; animation: pd-wiggle 3.5s ease-in-out infinite .6s; }

.pd-remind-modal__stats {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.pd-remind-stat {
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: .76rem;
    color: rgba(255, 255, 255, .85);
}

.pd-remind-stat strong { color: #fff; }
.pd-remind-stat--overdue { background: rgba(219, 74, 14, .35); border-color: rgba(255, 190, 120, .35); }

.pd-remind-list {
    list-style: none;
    margin: 0;
    padding: 4px 10px 8px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
}

.pd-remind-group {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 10px 6px;
    background: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pd-ink-3);
}

.pd-remind-item {
    border-radius: 12px;
    transition: background .2s;
    animation: pd-item-in .45s var(--pd-ease) both;
    animation-delay: calc(var(--i, 0) * 45ms + 180ms);
}

.pd-remind-item:hover { background: var(--pd-soft); }

@keyframes pd-item-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.pd-remind-modal__foot {
    display: flex;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--pd-line);
}

.pd-remind-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 0;
    font-size: .88rem;
    font-weight: 600;
    transition: transform .2s var(--pd-ease), box-shadow .2s, background .2s;
}

.pd-remind-btn--ghost { flex: 0 0 auto; background: var(--pd-soft); color: var(--pd-ink-2); }
.pd-remind-btn--ghost:hover { background: #ede7db; }

.pd-remind-btn--primary {
    flex: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--pd-leaf-900), var(--pd-leaf) 55%, #2e8b4a);
    box-shadow: 0 12px 24px -14px rgba(22, 101, 52, .8);
}

.pd-remind-btn--primary:hover { color: #fff; transform: translateY(-2px); }

/* ==========================================================
 * RESPONSIVE
 * ========================================================== */
@media (max-width: 1199.98px) {
    .pd-user__text,
    .pd-user__chev { display: none; }
    .pd-user { padding: 3px !important; }
}

@media (max-width: 575.98px) {
    .pd-navbar__title small,
    .pd-bell__label { display: none; }
    .pd-bell { padding: 4px !important; }
    .pd-remind-when { flex-basis: 64px; }
}

/* ==========================================================
 * REDUCED MOTION
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .pd-menu .menu-inner > .menu-item,
    .pd-remind-item,
    .pd-navbar .dropdown-menu.show,
    .pd-bell__icon::after,
    .pd-bell__icon i,
    .pd-remind-modal__bell i { animation: none !important; }

    .pd-remind-modal.fade .modal-dialog { transition: none; transform: none; }
}