/* DTBG Ditto UI - Custom Professional CSS */
:root {
    --dtbg-bg: #F3F6F9;
    --dtbg-white: #FFFFFF;
    --dtbg-primary: #2563EB;
    --dtbg-primary-light: #D1E1FF;
    --dtbg-text-main: #1E293B;
    --dtbg-text-muted: #64748B;
    --dtbg-border: #E2E8F0;
    --dtbg-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02); /* Made shadow almost invisible for flatter UI */
    --dtbg-font: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--dtbg-font); background-color: var(--dtbg-bg); color: var(--dtbg-text-main); font-size: 13px; }

/* Global Layout */
.dtbg-wrapper { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar */
.dtbg-sidebar { 
    width: 80px; 
    background: var(--dtbg-white); 
    border-right: 1px solid var(--dtbg-border); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px 0; 
    z-index: 100; 
    box-shadow: 4px 0 10px rgba(0,0,0,0.02);
}
.sidebar-icon-box { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 6px; 
    margin-bottom: 12px; 
    cursor: pointer; 
    text-decoration: none; 
    width: 64px; 
    height: 64px;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-icon-box i { 
    color: var(--dtbg-text-muted); 
    width: 24px; 
    height: 24px; 
    transition: 0.2s; 
}
.sidebar-icon-box span { 
    font-size: 10px; 
    font-weight: 700; 
    color: var(--dtbg-text-muted); 
    transition: 0.2s;
}
.sidebar-icon-box:hover { 
    background: #F1F5F9; 
}
.sidebar-icon-box:hover i {
    transform: scale(1.1);
}
.sidebar-icon-box.active { 
    background: var(--dtbg-primary-light); 
}
.sidebar-icon-box.active i, .sidebar-icon-box.active span { 
    color: var(--dtbg-primary); 
}

/* Top Navbar */
.dtbg-navbar { height: 56px; background: var(--dtbg-white); border-bottom: 1px solid var(--dtbg-border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; width: 100%; position: sticky; top: 0; z-index: 90; }
.navbar-left { display: flex; align-items: center; gap: 20px; flex: 1; }
.dtbg-logo { font-size: 18px; font-weight: 800; color: var(--dtbg-primary); display: flex; align-items: center; gap: 8px; }
.dtbg-search { background: #F1F5F9; border: 1px solid var(--dtbg-border); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; width: 400px; height: 36px; }
.dtbg-search input { background: transparent; border: none; outline: none; padding: 0 10px; font-size: 13px; width: 100%; }

.navbar-right { display: flex; align-items: center; gap: 15px; }
.nav-tool { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--dtbg-border); border-radius: 8px; font-weight: 600; color: var(--dtbg-text-muted); cursor: pointer; }
.nav-tool:hover { background: #F8FAFC; }

/* Dashboard Content */
.dtbg-content { flex: 1; overflow-y: auto; padding: 20px; }

/* Cards & Widgets */
.dtbg-card { background: var(--dtbg-white); border: 1px solid var(--dtbg-border); border-radius: 12px; box-shadow: var(--dtbg-shadow); margin-bottom: 20px; }
.card-head { padding: 15px 20px; border-bottom: 1px solid #F8FAFC; display: flex; justify-content: space-between; align-items: center; }
.card-head h3 { font-size: 14px; font-weight: 700; }

/* Email List Styling (Ditto) */
.email-row { display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid #F8FAFC; cursor: pointer; transition: 0.1s; }
.email-row:hover { background: #F8FAFC; }
.initial-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-right: 15px; }
.email-sender { width: 140px; font-weight: 700; font-size: 12px; }
.email-subject { flex: 1; color: var(--dtbg-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.email-time { width: 100px; text-align: right; font-size: 11px; font-weight: 600; color: var(--dtbg-text-muted); }

/* Drive UI (Ditto) */
.filter-btn { padding: 6px 15px; border: 1px solid var(--dtbg-border); border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--dtbg-white); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.drive-card { border-radius: 16px; padding: 15px; border: 1px solid var(--dtbg-border); height: 200px; display: flex; flex-direction: column; justify-content: space-between; transition: 0.2s; }
.drive-card:hover { border-color: var(--dtbg-primary); }


/* Chat UI (Ditto) */
.chat-container { display: flex; height: calc(100vh - 120px); background: var(--dtbg-white); border-radius: 12px; border: 1px solid var(--dtbg-border); }
.chat-sidebar { width: 300px; border-right: 1px solid var(--dtbg-border); overflow-y: auto; }
.chat-main { flex: 1; display: flex; flex-direction: column; background: #F8FAFC; }
.chat-bubble { padding: 10px 15px; border-radius: 12px; max-width: 70%; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
.bubble-in { background: #FFFFFF; border: 1px solid var(--dtbg-border); align-self: flex-start; }
.bubble-out { background: #E2E8F0; align-self: flex-end; }

/* Buttons */
.btn-join { background: var(--dtbg-primary-light); color: var(--dtbg-primary); font-weight: 700; padding: 8px 20px; border-radius: 8px; border: none; cursor: pointer; }
.btn-join:hover { background: var(--dtbg-primary); color: white; }

/* Custom Color Utilities */
.bg-pink { background-color: #fce7f3; color: #db2777; }
.bg-green { background-color: #dcfce7; color: #16a34a; }
.bg-blue { background-color: #dbeafe; color: #2563eb; }
.bg-orange { background-color: #ffedd5; color: #ea580c; }
.bg-yellow { background-color: #fef9c3; color: #ca8a04; }
.bg-teal { background-color: #ccfbf1; color: #0d9488; }
.bg-slate { background-color: #f1f5f9; color: #475569; }
.bg-indigo { background-color: #e0e7ff; color: #4f46e5; }