/* Simple modern app-like CSS */
:root{
  --accent:#1e88e5;
  --bg:#f6f9fc;
  --card:#ffffff;
  --muted:#64748b;
  --radius:12px;
}
body .mb-app{font-family:Inter, system-ui, -apple-system, 'SF Pro Display', Roboto, Arial; max-width:1200px; margin:18px auto; background:var(--bg); border-radius:14px; overflow:hidden; box-shadow:0 18px 50px rgba(10,20,40,0.06);}
.mb-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,white,rgba(255,255,255,0.9));border-bottom:1px solid rgba(10,20,40,0.03);}
.mb-title{font-weight:700;font-size:16px;margin-left:8px;}
.mb-search input{padding:8px 12px;border-radius:999px;border:1px solid rgba(10,20,40,0.06);min-width:180px;}
.mb-icon{background:transparent;border:none;font-size:18px;cursor:pointer;padding:6px 8px;border-radius:8px;}
.mb-side{position:fixed;left:10px;top:80px;width:220px;background:transparent;padding:8px;display:none;}
.mb-side ul{list-style:none;padding:8px;margin:0;}
.mb-side li{margin-bottom:8px;}
.mb-open{display:block;width:100%;padding:8px 12px;border-radius:10px;border:none;background:transparent;cursor:pointer;text-align:left;font-weight:600;color:var(--muted);}
.mb-open:hover{background:linear-gradient(90deg, rgba(30,136,229,0.06), transparent);color:var(--accent);}
.mb-main{padding:16px;padding-top:8px;min-height:480px;}
.mb-tabbar{display:flex;gap:8px;border-radius:10px;overflow:auto;padding:8px;margin-bottom:12px;background:transparent;}
.mb-tab{background:var(--card);padding:8px 12px;border-radius:10px;display:flex;gap:8px;align-items:center;box-shadow:0 4px 12px rgba(10,20,40,0.06);cursor:pointer;min-width:120px;transition:transform .12s;}
.mb-tab.active{transform:scale(1.04);box-shadow:0 20px 40px rgba(10,20,40,0.08);}
.mb-tab .close{margin-left:auto;background:transparent;border:none;cursor:pointer;font-weight:700;color:#888;}
.mb-viewport{background:transparent;min-height:360px;border-radius:10px;padding:12px;}
.mb-content{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 10px 30px rgba(10,20,40,0.04);}
/* mobile responsive */
@media (max-width:800px){
  body .mb-app{margin:0;border-radius:0;}
  .mb-side{display:none;}
  .mb-search input{min-width:100px;}
}


/* Polished UI additions */
.mb-header{backdrop-filter: blur(6px);}
.mb-tab{background:linear-gradient(180deg, #fff, #fbfdff);border:1px solid rgba(10,20,40,0.04);}
.mb-tab .detach{margin-left:6px;background:transparent;border:none;cursor:pointer;font-size:14px;}
/* floating windows */
.mb-window{position:fixed;width:520px;min-height:220px;background:var(--card);border-radius:10px;box-shadow:0 30px 80px rgba(2,6,23,0.2);overflow:hidden;z-index:99999;}
.mb-window .win-head{padding:8px 10px;background:linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));cursor:move;display:flex;align-items:center;gap:8px;}
.mb-window .win-body{padding:12px;overflow:auto;max-height:60vh;}
/* dark mode */
body.mb-dark { background:#0b1220; }
body.mb-dark .mb-app { box-shadow:none; background:#071022; }
body.mb-dark .mb-content { background:#07122a; color:#dbeafe; }

/* --- MAILBOX STYLES --- */

/* Général */
.mailbox-login-card {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    max-width: 500px;
    margin: 50px auto;
    text-align: center;
}

.login-title {
    color: #4a69bd;
    margin-bottom: 5px;
}

.login-subtitle {
    color: #777;
    margin-bottom: 30px;
}

.google-oauth-placeholder {
    margin-bottom: 20px;
}

.google-style-btn {
    background: #fff;
    color: #444;
    border: 1px solid #ddd;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
}
.google-style-btn:hover {
    background: #f8f8f8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.oauth-note {
    font-size: 0.8em;
    color: orange;
    margin-top: 10px;
}

.divider {
    text-align: center;
    margin: 20px 0;
    color: #ccc;
    font-size: 0.9em;
    position: relative;
}
.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #eee;
}
.divider::before { left: 0; }
.divider::after { right: 0; }

/* Formulaire IMAP */
.imap-form .input-group {
    text-align: left;
    margin-bottom: 15px;
}
.imap-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}
.imap-form input[type="email"], 
.imap-form input[type="text"], 
.imap-form input[type="password"],
.imap-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

.password-group {
    position: relative;
}
.password-group .inline-label {
    font-size: 0.9em;
    font-weight: normal;
    margin-left: 5px;
}
.input-options {
    text-align: left;
    margin-bottom: 20px;
}

/* Messages */
.message-area {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    font-weight: 500;
}
.message-area.success {
    background: #e6ffed;
    color: #008744;
}
.message-area.error {
    background: #ffe6e6;
    color: #d90000;
}

/* --- Vue Principale de la Mailbox --- */
.mailbox-main-view {
    display: flex;
    flex-direction: column;
    height: 700px; /* Hauteur fixe pour la démo */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.mailbox-toolbar {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #f8fbfc;
}

.mailbox-toolbar .modern-action-btn {
    margin-right: 10px;
}
.mailbox-toolbar .secondary-btn {
    margin-left: auto; /* Pousser le bouton de déconnexion à droite */
}

.mailbox-info {
    color: #555;
    font-size: 0.9em;
    margin-left: 15px;
}

.emails-list-container, .email-viewer-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 20px;
}

/* Liste des emails */
.emails-list-container table {
    margin: 10px 0;
}
.emails-list-container th {
    color: #4a69bd;
    font-weight: 700;
}

.ec_email_item {
    transition: background-color 0.2s;
}
.ec_email_item:hover {
    background-color: #f5f5f5;
}
.ec_email_item.selected {
    background-color: #e0f2ff;
    border-left: 4px solid #4a69bd;
    font-weight: 500;
}

/* Lecteur d'email */
.email-viewer-container {
    padding: 20px;
}
.email-content-wrapper {
    margin-top: 15px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
}

/* Zone de composition */
.compose-form-card {
    padding: 20px;
    border-top: 1px solid #eee;
    background: #f8fbfc;
    border-radius: 0 0 10px 10px;
}
.compose-title {
    color: #4a69bd;
    margin-bottom: 15px;
}
.compose-form-card input[type="email"],
.compose-form-card input[type="text"],
.compose-form-card textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}
.compose-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}