:root { 
    --nac-blue: #0056b3; 
    --nac-dark: #002d5a; 
    --border: #e1e4e8; 
    --urgent: #ff4d4d; /* Red */
    --soon: #f66a0a;   /* Orange */
    --later: #ffd33d;  /* Yellow */
    --future: #28a745; /* Green */
    --done: #28a745; 
    --neutral: #95a5a6; /* Grey */
}

body { margin: 0; display: flex; height: 100vh; font-family: 'Segoe UI', system-ui, sans-serif; background: #f6f8fa; overflow: hidden; }

/* LOGIN OVERLAY */
#login-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: var(--nac-dark); z-index: 9999; 
    display: flex; align-items: center; justify-content: center; color: white; 
}
.login-card { 
    background: white; padding: 40px; border-radius: 12px; width: 350px; 
    color: #333; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
}

/* MAIN APP LAYOUT */
#crm-app { display: none; width: 100%; height: 100%; flex-direction: row; }

#nav { 
    width: 260px; background: var(--nac-dark); color: white; 
    display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; 
}
.nav-header { font-weight: 900; font-size: 24px; margin-bottom: 5px; letter-spacing: 1px; }
.nav-btn { 
    width: 100%; padding: 12px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 6px; background: transparent; color: white; text-align: left; 
    cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; 
}
.nav-btn:hover { background: var(--nac-blue); }

#main-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

.content-scroll { 
    flex-grow: 1; overflow-y: auto; padding: 20px 40px; 
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; 
}
.full-view { flex-grow: 1; overflow-y: auto; padding: 20px 40px; display: none; }

.card { 
    background: white; border: 1px solid var(--border); border-radius: 10px; 
    display: flex; flex-direction: column; overflow: hidden; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 20px; 
}
.card-header { 
    padding: 15px; background: #fff; border-bottom: 1px solid var(--border); 
    font-weight: bold; font-size: 12px; text-transform: uppercase; color: #555; 
    display: flex; justify-content: space-between; align-items: center; 
}
.card-body { padding: 15px; flex-grow: 1; overflow-y: auto; }

/* ITEM CARDS & URGENCY COLORS */
.item-card { 
    padding: 15px; margin-bottom: 12px; border-radius: 8px; 
    border-left: 5px solid #ccc; background: #fff; border: 1px solid #eee; position: relative; 
    cursor: pointer; transition: 0.1s;
}
.item-card:hover { border-color: var(--nac-blue); background: #fcfcfc; }

/* Red: Overdue tasks */
.item-card.urgent { border-left: 5px solid var(--urgent); background: #fff5f5; }
/* Orange: Due within 24h */
.item-card.soon { border-left: 5px solid var(--soon); background: #fff9f5; }
/* Yellow: Due within 3 days */
.item-card.later { border-left: 5px solid var(--later); background: #fffdf5; }
/* Green: Future tasks */
.item-card.future { border-left: 5px solid var(--future); background: #f6fff8; }
/* Grey: No pending tasks */
.item-card.none { border-left: 5px solid var(--neutral); background: #fafafa; }
/* Blue/Green mix: Completed interactions */
.item-card.done { border-left: 5px solid var(--done); background: #fcfcfc; }

input, select, textarea { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; font-family: inherit; }
#co-search { background: rgba(255,255,255,0.1); color: white; border: none; margin-top: 5px; }
#co-search::placeholder { color: rgba(255,255,255,0.4); }

button.primary { background: var(--nac-blue); color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%; }
button.secondary { background: #eee; color: #333; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; }
button.danger { background: var(--urgent); color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: bold; }

.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; }
#company-map, #territory-map { height: 280px; width: 100%; border-radius: 10px; border: 1px solid var(--border); }
#full-map-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; display: none; background: white; }

.det-label { font-size: 10px; font-weight: 800; color: #888; text-transform: uppercase; margin-bottom: 4px; display: block; }