/* Modern Dashboard Styles - Mobile First */

:root {
    /* Light, comfortable palette (WhatsApp-inspired) */
    --modern-bg: #f5f6f6;               /* page background */
    --modern-card-bg: #ffffff;          /* cards */
    --modern-text: #111b21;             /* main text */
    --modern-secondary-text: #54656f;   /* secondary */
    --modern-primary: #00A884;          /* WA accent */
    --modern-header-bg: #ffffff;        /* header/footer */
    --modern-border-color: #e2e8ec;     /* strokes */
}

[data-theme="dark"] {
    /* WhatsApp-like elegant palette */
    --modern-bg: #111B21;                 /* page background */
    --modern-card-bg: #202C33;            /* panels/cards */
    --modern-text: #E9EDEF;               /* main text */
    --modern-secondary-text: #8696A0;     /* secondary */
    --modern-header-bg: #202C33;          /* header/footer */
    --modern-border-color: #2A3942;       /* strokes */
    --modern-primary: #00A884;            /* WA accent */
}

body.modern-ui {
    background-color: var(--modern-bg);
    color: var(--modern-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* In modern UI, hide the entire legacy dashboard to avoid overlap */
.modern-ui .dashboard-ui { display: none !important; }
.modern-ui #mobile-view-wrapper { display: flex !important; flex-direction: column; min-height: 100vh; padding-top: 56px; padding-bottom: 62px; }
.modern-ui body { background-color: var(--modern-bg); }

/* Make mobile header and bottom nav visible in modern mode */
.modern-ui .mv-header { display: flex !important; position: fixed; top: 0; right: 0; left: 0; z-index: 1000; }
.modern-ui .mv-bottom-nav { display: flex !important; }

/* Page paddings to avoid overlap with fixed header/footer */


/* Add a main content area for the modern view */
.mv-main-content { flex-grow: 1; overflow-y: auto; padding: 15px; }

/* Modern components */
.mv-section{padding:10px 12px;}
.mv-card{background:var(--modern-card-bg);border:1px solid var(--modern-border-color);border-radius:16px;padding:16px;box-shadow:0 10px 30px -16px rgba(0,0,0,.5)}
/* === AI Ambient Background (Smart Reply) === */
#mv-ai{ position: relative; }
#mv-ai.mv-has-ambient, .mv-section.mv-has-ambient{ min-height: 70vh; overflow: hidden; }
#mv-ai .mv-ambient{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#mv-ai .mv-ambient::before{ content:""; position:absolute; inset:-20%; background:conic-gradient(from 0deg at 70% 30%, rgba(37,211,102,.22), rgba(56,189,248,.16), rgba(168,85,247,.18), rgba(37,211,102,.22)); filter:blur(36px); opacity:.45; animation:mv-rotate-slow 26s linear infinite; }
#mv-ai .mv-ambient::after{ content:""; position:absolute; width:60vmin; height:60vmin; left:10%; top:20%; background:radial-gradient(closest-side, rgba(56,189,248,.22), rgba(56,189,248,0)); border-radius:50%; filter:blur(18px); opacity:.45; animation:mv-float 14s ease-in-out infinite alternate; }

#mv-ai .mv-card{ position:relative; z-index:1; }

@keyframes mv-rotate-slow{ from{ transform:rotate(0deg) scale(1.05);} to{ transform:rotate(360deg) scale(1.05);} }
@keyframes mv-float{ 0%{ transform:translate3d(0,0,0) scale(1);} 100%{ transform:translate3d(10vmin, -6vmin, 0) scale(1.05);} }

/* Badges used in queue filters (colors reused here, too) */
.mv-badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; line-height:1.6; border:1px solid transparent; }
.mv-badge-ok{ color:#10b981; border-color:rgba(16,185,129,.35); background:rgba(16,185,129,.08); }
.mv-badge-warn{ color:#f59e0b; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08); }
.mv-badge-danger{ color:#ef4444; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); }

/* Optional: subtle grid pattern for large screens */
@media (min-width: 992px){
    #mv-ai .mv-ambient .mv-ambient-grid{ position:absolute; inset:0; opacity:.06; background-image:linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); background-size: 64px 64px; mix-blend-mode: screen; }
}
.mv-card-title{margin:0 0 10px;font-size:18px;display:flex;gap:8px;align-items:center;color:var(--modern-text)}
.mv-form label{display:block;margin:10px 0 6px;font-size:13px;color:var(--modern-secondary-text)}
.mv-input{width:100%;background:transparent;border:1px solid var(--modern-border-color);color:var(--modern-text);border-radius:12px;padding:10px;font-size:14px}
.mv-input:focus{outline:none;border-color:var(--modern-primary);box-shadow:0 0 0 3px color-mix(in hsl, var(--modern-primary) 18%, transparent)}
.mv-row{display:flex;gap:10px;flex-wrap:wrap}
.mv-between{justify-content:space-between}
.mv-center-v{align-items:center}
.mv-btn{border:1px solid var(--modern-border-color);background:transparent;color:var(--modern-text);padding:10px 14px;border-radius:12px;cursor:pointer;transition:background .2s,border-color .2s,transform .08s}
.mv-btn:hover{background:rgba(0,0,0,.035)}
.mv-btn:active{transform:translateY(1px)}
.mv-btn-primary{background:var(--modern-primary);border-color:var(--modern-primary);color:#0d1f18}
.mv-btn-ghost{background:transparent}
.mv-btn-outline{background:transparent;border-color:var(--modern-primary);color:var(--modern-primary)}
.mv-btn-xs{padding:6px 8px;border-radius:10px;font-size:12px}
.mv-status{margin-top:10px}
.mv-alert{padding:10px 12px;border-radius:12px}
.mv-alert-info{background:#0ea5e940;color:#1f9bd1;border:1px solid #0ea5e980}
.mv-alert-success{background:#14b8a640;color:#0f766e;border:1px solid #14b8a680}
.mv-alert-danger{background:#ef444440;color:#b91c1c;border:1px solid #ef444480}
.mv-list{display:flex;flex-direction:column;gap:10px}
.mv-item{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--modern-border-color);border-radius:12px;padding:10px 12px;background:transparent}
.mv-item-main{display:flex;flex-direction:column}
.mv-item-title{font-weight:600}
.mv-item-sub{font-size:12px;color:var(--modern-secondary-text)}
.mv-empty{opacity:.7;padding:20px;text-align:center}
.mv-skeleton{opacity:.7;padding:14px}
.mv-muted{opacity:.8}
.mv-hint{font-size:11px;opacity:.6;margin-top:4px}
.mv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mv-card-sub{border:1px dashed var(--modern-border-color);border-radius:12px;padding:12px}
.mv-card-sub h4{margin:0 0 8px;font-size:15px}

/* iOS-like switch */
.mv-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.mv-switch input{display:none}
.mv-switch span{position:relative;width:42px;height:22px;background:#5553;border-radius:999px;transition:.25s}
.mv-switch span:after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.mv-switch input:checked + span{background:var(--modern-primary)}
.mv-switch input:checked + span:after{transform:translateX(-20px)}
.mv-switch em{font-style:normal;font-size:13px;opacity:.85}

/* Segmented controls for style/density */
.mv-seg{display:inline-flex;border:1px solid var(--modern-border-color);border-radius:10px;overflow:hidden}
.mv-seg button{background:transparent;border:0;color:var(--modern-text);padding:6px 10px;cursor:pointer}
.mv-seg button.active{background:color-mix(in hsl, var(--modern-primary) 14%, transparent); color: var(--modern-text); border-inline-start:1px solid color-mix(in hsl, var(--modern-primary) 35%, var(--modern-border-color));}

/* AI view layout modifiers */
#mv-ai.mv-layout-classic .mv-grid-2{grid-template-columns:1fr;}
#mv-ai.mv-layout-classic .mv-card-sub{border-style:solid}
#mv-ai.mv-density-comfort .mv-card, #mv-ai.mv-density-comfort .mv-card-sub{padding:18px}
#mv-ai.mv-density-comfort .mv-input{padding:12px;font-size:15px}
#mv-ai.mv-density-compact .mv-card, #mv-ai.mv-density-compact .mv-card-sub{padding:10px}
#mv-ai.mv-density-compact .mv-input{padding:8px;font-size:13px}

/* AI icon subtabs */
.mv-subtabs{display:flex;gap:8px;overflow:auto;padding:6px;border:1px solid var(--modern-border-color);border-radius:12px;background:rgba(255,255,255,.02);margin-bottom:10px}
.mv-subtabs button{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;color:var(--modern-secondary-text);padding:8px 10px;border-radius:10px;cursor:pointer;white-space:nowrap}
.mv-subtabs button i{font-size:14px}
.mv-subtabs button.active{color:var(--modern-primary);background:color-mix(in hsl, var(--modern-primary) 18%, transparent); border-color:color-mix(in hsl, var(--modern-primary) 32%, var(--modern-border-color));}
.mv-subtab-content{display:none}
.mv-subtab-content.active{display:block}

/* Keys manager */
.mv-key-item{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--modern-border-color);border-radius:12px;padding:10px;background:rgba(255,255,255,.02)}
.mv-key-item.offline{opacity:.8}
.mv-key-main{display:flex;flex-direction:column}
.mv-key-title{font-weight:600}
.mv-key-model{font-size:12px;opacity:.7;margin-inline-start:6px}
.mv-key-actions{display:flex;gap:6px}
.mv-key-item.dragging{opacity:.6}

/* Simple modal */
.mv-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1200}
.mv-modal-dialog{background:var(--modern-card-bg);border:1px solid var(--modern-border-color);border-radius:14px;min-width:320px;max-width:480px;width:92%;box-shadow:0 10px 40px -10px rgba(0,0,0,.7)}
.mv-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--modern-border-color)}
.mv-modal-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.mv-modal-footer{padding:12px 14px;border-top:1px solid var(--modern-border-color);display:flex;gap:8px;justify-content:flex-end}
.mv-modal-close{background:transparent;border:0;color:var(--modern-text);font-size:20px;cursor:pointer}

/* Modern toolbar */
.mv-toolbar{display:flex;gap:10px;align-items:center;padding:10px 12px}
.mv-spacer{flex:1}
.mv-pill{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--modern-border-color);}
.mv-pill.offline{background:#7f1d1d33;color:#fecaca;border-color:#7f1d1d66}
.mv-pill.online{background:#065f4633;color:#bbf7d0;border-color:#065f4666}


#mobile-view-wrapper {
    display: none; /* Hidden by default */
}

.mv-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
}

.mv-tab-content {
    display: none;
}

.mv-tab-content.active {
    display: block;
}

.mv-header {
    background-color: var(--modern-header-bg);
    border-bottom: 1px solid var(--modern-border-color);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mv-header-title {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mv-header-actions .mv-action-btn {
    background: none;
    border: none;
    color: var(--modern-secondary-text);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 5px;
}

.mv-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--modern-header-bg);
    border-top: 1px solid var(--modern-border-color);
    display: flex;
    justify-content: space-around;
    padding: 5px 0;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}

.mv-nav-item {
    background: none;
    border: none;
    color: var(--modern-secondary-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    padding: 5px 10px;
    cursor: pointer;
}

.mv-nav-item.active { color: var(--modern-primary); position:relative }
.mv-nav-item.active::after{ content:""; position:absolute; bottom:0; left:18%; right:18%; height:2px; background: var(--modern-primary); border-radius:2px }

.mv-nav-item i {
    font-size: 1.2rem;
}

/* Modern skin for legacy modules mounted under More */
.legacy-skin {
    --legacy-bg: var(--modern-card-bg);
    --legacy-border: var(--modern-border-color);
    --legacy-text: var(--modern-text);
    --legacy-muted: var(--modern-secondary-text);
}
.legacy-skin .card, .legacy-skin .panel, .legacy-skin .box,
.legacy-skin .scheduled-messages-container,
.legacy-skin .scheduled-message-card,
.legacy-skin .stats-section,
.legacy-skin .table-container {
    background: var(--modern-card-bg) !important;
    color: var(--modern-text) !important;
    border: 1px solid var(--modern-border-color) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 28px -14px rgba(0,0,0,.35) !important;
}
.legacy-skin h1, .legacy-skin h2, .legacy-skin h3, .legacy-skin h4, .legacy-skin h5 {
    color: var(--modern-text);
}
.legacy-skin .btn, .legacy-skin button {
    border-radius: 12px !important;
}
.legacy-skin input[type="text"],
.legacy-skin input[type="number"],
.legacy-skin input[type="time"],
.legacy-skin input[type="date"],
.legacy-skin select,
.legacy-skin textarea {
    background: transparent !important;
    color: var(--modern-text) !important;
    border: 1px solid var(--modern-border-color) !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
}
.legacy-skin .alert { border-radius: 12px; }
.legacy-skin .badge, .legacy-skin .tag, .legacy-skin .group-badge {
    border-radius: 999px !important; padding: 4px 8px !important;
}
.legacy-skin .scheduled-messages-grid { gap: 12px !important; }
.legacy-skin .scheduled-message-card { padding: 12px !important; }
.legacy-skin .scheduled-message-card .header,
.legacy-skin .scheduled-message-card .footer {
    display:flex; align-items:center; justify-content:space-between;
}
.legacy-skin .scheduled-message-card .actions .btn {
    padding: 6px 10px !important;
}
.legacy-skin .table thead th { background: rgba(255,255,255,.03); }
.legacy-skin .muted, .legacy-skin .help, .legacy-skin small { color: var(--modern-secondary-text) !important; }

/* WhatsApp-like hover for list items */
.mv-item:hover{ background: rgba(0,0,0,.03) }

/* Switch accent to WA green */
/* (deduped) .mv-switch accent handled above */

/* Comfort spacing for list blocks */
/* (deduped) spacing merged into base .mv-item rule above */

/* === API view additions === */
.mv-api .mv-api-grid{ align-items:stretch }
.mv-code{ background: #0b122033; color: #e7eaee; border:1px solid var(--modern-border-color); border-radius: 12px; padding: 12px; max-height: 340px; overflow: auto; direction:ltr; text-align:left }
.mv-code code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word }
.mv-mask{ font-family: inherit }
.mv-api .mv-card-sub .mv-input[readonly]{ opacity:.9 }
.mv-api .mv-status .mv-alert{ margin-top:8px }
@media (max-width: 820px){
    .mv-api .mv-api-grid{ display:grid; grid-template-columns:1fr; gap:12px }
}
@media (min-width: 821px){
    .mv-api .mv-api-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
}