/* Layout styles */
/* =====================================
   1. VARIABLES
===================================== */

:root {

    --forest: #3d5437;
    --forest-dark: #2f432d;

    --sage: #6e825b;

    --cream: #f4efdf;
    --paper: #fbf8ee;
    --card: #eee9d8;

    --line: #d8d1bb;

    --ink: #4e503f;
    --muted: #858574;

    --gold: #c89e3f;

    --shadow:
        0 8px 22px rgba(73, 70, 45, .12);

    --radius: 18px;

}

/* =====================================
   2. RESET
===================================== */

* {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    background: #e9e4d2;

    color: var(--ink);

    font-family:
        Poppins,
        "Arial",
        sans-serif;

}

button {

    font: inherit;

    color: inherit;

}

/* =====================================
   3. MAIN LAYOUT
===================================== */

.app-shell {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        220px
        1fr;

}

.main {

    min-width: 0;

    padding:
        0 28px 24px;

    overflow: hidden;

}

/* =====================================
   4. SIDEBAR
===================================== */
.sidebar-profile{

    margin-top:auto;

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding-bottom:35px;

}

.sidebar-profile .profile-avatar{

    width:85px;

    height:85px;

    margin:0 auto;

}

.sidebar-profile #editProfileBtn{

    border:0;

    background:#f7f2e5;

    color:#515642;

    padding:8px 18px;

    border-radius:14px;

    cursor:pointer;

    font-size:11px;

}

.sidebar {

    background:
        linear-gradient(
            180deg,
            #3e5739,
            #31462e
        );

    color:
        #f7f0db;

    padding:
        20px 14px 14px;

    position: sticky;

    top: 0;

    height: 100vh;

    overflow: auto;

}

.sidebar{

    display:flex;

    flex-direction:column;

}

.brand-card {

    background: #8d6745;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius: 9px;

    text-align: center;

    padding:
        13px 8px;

    margin:
        3px 5px 12px;

}

.brand-name {

    font-size: 20px;

    font-weight: 700;

}

.side-nav {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.nav-item {

    border: 0;

    background: transparent;

    color:
        #f1ead7;

    text-align: left;

    padding:
        9px 10px;

    border-radius: 13px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 9px;

}

.nav-item:hover,
.nav-item.active {

    background:
        #f7f2e5;

    color:
        #515642;

}
/* =====================================
   5. HEADER + PROFILE
===================================== */

.topbar {

    min-height: 108px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

.welcome .eyebrow {

    font-size: 11px;

    color: var(--muted);

}

.welcome h1 {

    font-size: 25px;

    margin: 4px 0 3px;

    color: #444738;

}

.welcome p {

    font-size: 11px;

    margin: 0;

    color: #8c8c7b;

}

.top-meta {

    display: flex;

    align-items: center;

    gap: 12px;

}

.date-box {

    display: grid;

    gap: 3px;

    font-size: 10px;

    color: #6e705f;

    text-align: right;

}

/* PROFILE */

.profile-wrapper {

    position: relative;

}

.profile-avatar{

    width:100px;

    height:100px;

    overflow:hidden;

    display:grid;

    place-items:center;

    border-radius:50%;

    border:

        4px solid

        #f4f0df;

    background:

        #d6d9bd;

}

.profile-avatar img.has-image {

    display: block;

}

#profileDefault {

    font-size: 24px;

}

.edit-profile {

    position: absolute;

    right: -2px;

    bottom: -2px;

    width: 19px;

    height: 19px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:

        2px solid

        #f4f0df;

    background:

        var(--sage);

    color: white;

    font-size: 9px;

    opacity: 0;

    transition: .2s;

}

.profile-avatar:hover .edit-profile {

    opacity: 1;

}

.profile-avatar:hover {

    transform: scale(1.04);

}

.menu-btn {

    display: none;

}

/* =====================================
   6. HERO LANDSCAPE
===================================== */

.hero-landscape {

    height: 168px;

    position: relative;

    overflow: hidden;

    border-radius:

        22px

        22px

        12px

        12px;

    background:

        linear-gradient(
            #e7eee0 0%,
            #cbd9c1 45%,
            #b3caa4 58%,
            #8eaf83 100%
        );

    border:

        1px solid

        #d4d7c5;

    box-shadow:

        var(--shadow);

}

.hero-landscape::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 18% 20%,
            rgba(255,255,255,.75),
            transparent 25%
        ),

        radial-gradient(
            circle at 78% 24%,
            rgba(255,255,255,.45),
            transparent 20%
        );

}

/* HILLS */

.hill {

    position: absolute;

    border-radius:

        50%

        50%

        0

        0;

}

.hill-back {

    width: 55%;

    height: 90px;

    left: -5%;

    bottom: 36px;

    background: #9db692;

}

.hill-mid {

    width: 65%;

    height: 82px;

    right: -10%;

    bottom: 28px;

    background: #91a982;

}

/* =====================================
   7. DASHBOARD CARDS
===================================== */

.dashboard-grid{

    width:100%;

    display:grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-template-areas:

        "calendar agenda messages tasks"

        "overview overview overview overview"

        "photos collections island residents"

        "notes notes notes notes";

    gap:12px;

}
.dashboard-grid > *{

    min-width:0;

}

.card {

    min-width: 0;

    padding: 12px;

    min-height:260px;

    background:

        rgba(249,246,234,.94);

    border:

        1px solid

        var(--line);

    border-radius:

        var(--radius);

    box-shadow:

        0 4px 13px rgba(78,76,54,.07);

}

.calendar-card {

    grid-area: calendar;
    min-height:260px;

}

.agenda-card {

    grid-area: agenda;
    min-height:260px;
    display:flex;
    flex-direction:column;

}

.chat-card {

    grid-area: messages;
    min-height:260px;

}

.tasks-card {

    grid-area: tasks;
    min-height:260px;

}

.card-heading h3{

    margin:0;

    line-height:1;

}

.card-heading{

    display:flex;

    align-items:flex-start;

    gap:8px;

}

.link-btn,
.arrow {

    margin-left: auto;

    border: 0;

    background: transparent;

    cursor: pointer;

    color: #777968;

}
/* FIX HEIGHT TOP CARDS */

.calendar-card,
.agenda-card,
.chat-card,
.tasks-card{

    height:auto;
    min-height:260px;

}
.chat-card .chat-messages{

    max-height:150px;

}

/* =====================================
   8. CALENDAR
===================================== */
.calendar-buttons{
    display:flex;
    gap:4px;
}

.calendar-card .card-heading {

    justify-content: space-between;

}

.calendar-title {

    display: flex;

    align-items: center;

    gap: 7px;

}

.calendar-title h2 {

    margin: 0;

    font-size: 12px;

}

.calendar-arrow {

    width: 24px;

    height: 24px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #777968;

    cursor: pointer;

}

.calendar-arrow:hover {

    background: #e5dfcb;

    transform: scale(1.08);

}

.calendar {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 4px;

    text-align: center;

    font-size: 8px;

}

.calendar span {

    min-height: 21px;

    display: grid;

    place-items: center;

    border-radius: 6px;

}

.calendar .weekday {

    font-weight: bold;

    color: #8a8b7a;

}

.calendar .today {

    background: #d2bf89;

    color: #4f4b38;

    font-weight: bold;

    border-radius: 50%;

}

.calendar span:not(.weekday):not(.empty-day):hover {

    background: #e8e2cf;

    cursor: pointer;

}
/* =====================================
   9. CHAT
===================================== */

.chat-card {
    grid-area:messages;

    display: flex;

    flex-direction: column;

    min-height: 260px;

    overflow: hidden;

}

.chat-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 12px;

    border-bottom:

        1px solid

        #e7e1d1;

}

.chat-title {

    display: flex;

    align-items: center;

    gap: 9px;

}

.chat-icon {

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    background: #e7e2ce;

    border-radius: 10px;

}

.chat-title h2 {

    margin: 0;

    font-size: 13px;

}

.chat-status {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 3px;

    font-size: 8px;

    color: #8a8b7a;

}

.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--sage);

}

.chat-menu {

    border: 0;

    background: transparent;

    cursor: pointer;

}

/* MESSAGE AREA */

.chat-messages {

    flex: 1;

    min-height: 80px;

    max-height: 100px;

    padding: 14px 4px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 9px;

}

.chat-empty {

    margin: auto;

    color: #aaa994;

    font-size: 9px;

}

.chat-message {

    max-width: 80%;

}

/* PESAN SENDIRI */

.chat-message.mine {

    align-self: flex-end;

    text-align: right;

}

.chat-message.mine .message-bubble {

    background: var(--sage);

    color: white;

    border-radius: 14px 14px 4px 14px;

}

/* PESAN ORANG LAIN */

.chat-message.theirs {

    align-self: flex-start;

}

.chat-message.theirs .message-bubble {

    background: #ece9dc;

    color: var(--ink);

    border-radius: 14px 14px 14px 4px;

}

.message-name {

    font-size: 8px;

    color: #8a8b7a;

    margin-bottom: 3px;

}

.message-bubble {

    padding:

        9px

        12px;

    font-size: 10px;

    line-height: 1.45;

    overflow-wrap: anywhere;

}

.message-time {

    margin-top: 3px;

    font-size: 7px;

    color: #aaa997;

}

/* INPUT */

.chat-input-area {

    display: flex;

    flex-shrink:0;

    align-items: center;

    gap: 8px;

    padding-top: 12px;

    border-top:

        1px solid

        rgba(90,95,70,.12);

}

#chatInput {

    flex: 1;

    height: 38px;

    padding: 0 13px;

    border:

        1px solid

        #ddd9ca;

    border-radius: 19px;

    outline: none;

    background: #f8f6ee;

}

#chatInput:focus {

    border-color: #aeb69a;

}

.chat-send {

    width: 38px;

    height: 38px;

    border: 0;

    border-radius: 50%;

    background: var(--sage);

    color: white;

    cursor: pointer;

}
/* =====================================
   10. PROFILE MODAL
===================================== */

.profile-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:

        rgba(30,32,25,.35);

    z-index: 9999;

}

.profile-modal.active {

    display: flex;

}

.profile-modal-box {

    width: 100%;

    max-width: 360px;

    padding: 24px;

    border-radius: 20px;

    background: #fffdf6;

    box-shadow:

        0 20px 50px rgba(0,0,0,.15);

}

.profile-modal-close {

    float: right;

    border: 0;

    background: transparent;

    font-size: 20px;

    cursor: pointer;

}

.profile-preview {

    display: flex;

    justify-content: center;

    margin: 20px 0;

}

.profile-preview-image {

    width: 80px;

    height: 80px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: #eeeade;

}

.profile-preview-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

#saveProfileBtn {

    width: 100%;

    height: 40px;

    margin-top: 20px;

    border: 0;

    border-radius: 10px;

    background: var(--sage);

    color: white;

    cursor: pointer;

}
/* =====================================
   11. RESPONSIVE
===================================== */

@media(max-width:1100px){

    .dashboard-grid{

        grid-template-columns:
        repeat(2,1fr);

        grid-template-areas:

        "calendar agenda"

        "messages tasks"

        "overview overview"

        "photos collections"

        "island residents"

        "notes notes";

    }

}

@media(max-width:760px){

    .app-shell{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:relative;

        height:auto;

    }

    .dashboard-grid{

        grid-template-columns:1fr;

        grid-template-areas:

        "calendar"

        "agenda"

        "messages"

        "tasks"

        "overview"

        "photos"

        "collections"

        "island"

        "residents"

        "notes";

    }

    .topbar{

        flex-direction:column;

        align-items:flex-start;

    }

    .profile-avatar{

        width:70px;

        height:70px;

    }

}

/* FIX SIDEBAR PROFILE */

.sidebar .sidebar-profile{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-top:auto;
    padding-bottom:40px;
}

.sidebar .sidebar-profile .profile-avatar{
    width:85px;
    height:85px;
    margin:0 auto;
}

.sidebar .sidebar-profile #editProfileBtn{
    margin:0 auto;
}

/* =========================
   TODAY'S AGENDA
========================= */

.agenda-card{

    grid-area:agenda;

    min-height:220px;

}

#taskList{

    display:flex;

    flex-direction:column;

    gap:10px;

    min-height:120px;

}  

.task-item{

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    font-size:12px;

}

.task-item input{

    accent-color:#6e825b;

}

.task-item input:checked + span{

    text-decoration:line-through;

    opacity:.5;

}

.delete-task{

    margin-left:auto;

    border:0;

    background:transparent;

    cursor:pointer;

    color:#8d6745;

}

.add-task{

    display:flex;

    gap:6px;

    margin-top:auto;

    padding-top:12px;

}

#newTask{

    flex:1;

    border:1px solid #ddd8c5;

    border-radius:12px;

    padding:7px 10px;

}

#addTaskBtn{

    width:30px;

    height:30px;

    border:0;

    border-radius:50%;

    background:#6e825b;

    color:white;

    cursor:pointer;

}

/* NAVIGATION HIGHLIGHT ANIMATION */

.highlight-section{

    animation:
        sectionPop .6s ease;

}

@keyframes sectionPop{

    0%{

        transform:scale(.97);

        opacity:.6;

    }

    50%{

        transform:scale(1.02);

        opacity:1;

    }

    100%{

        transform:scale(1);

    }

}
/* =========================
   MOBILE SIDEBAR FIX
========================= */

@media(max-width:760px){

    .sidebar{

        position:fixed;

        top:0;
        left:0;

        height:100vh;

        width:260px;

        transform:translateX(-100%);

        transition:.3s ease;

        z-index:1000;

    }


    .sidebar.open{

        transform:translateX(0);

    }


    .main{

        width:100%;

    }

}
/* =========================
   MOBILE SIDEBAR OVERLAY
========================= */

.sidebar-overlay{

    display:none;

}


@media(max-width:760px){

    .sidebar-overlay{

        position:fixed;

        inset:0;

        background:
        rgba(0,0,0,.3);

        z-index:999;

    }


    .sidebar-overlay.active{

        display:block;

    }

}