/* ============================================================
   CLINICX PORTAL — Yellow / White Grid Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --accent: #c28b00;
    --accent-hover: #a37500;
    --accent-dim: rgba(194,139,0,0.13);
    --accent-dim2: rgba(194,139,0,0.06);
    --bg: #f5f5f3;
    --sidebar-bg: #111111;
    --card-bg: #ffffff;
    --input-bg: #fafaf8;
    --border: #e2e2e0;
    --border-dark: #c8c8c6;
    --text: #111111;
    --text-dim: #777777;
    --text-light: #aaaaaa;
    --text-on-dark: #eeeeee;
    --success: #22c55e;
    --error: #ef4444;
    --warning: #c28b00;
    --primary: #c28b00;
    --hover-bg: rgba(0,0,0,0.03);
    --shadow: 0 1px 3px rgba(0,0,0,0.07);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --transition: all 0.16s ease;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }
input,textarea,select,button { border-radius:0!important; font-family:'Inter',sans-serif; }

body {
    background:var(--bg); color:var(--text);
    min-height:100vh; overflow-x:hidden;
    font-size:13.5px; line-height:1.5;
}

/* LAYOUT */
.app-layout {
    display:block;
    min-height:100vh;
}

/* SIDEBAR */
.sidebar {
    background:var(--sidebar-bg);
    border-right:1px solid #1e1e1e;
    display:flex; flex-direction:column; overflow:hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 230px;
    z-index: 1000;
}

.sidebar-brand {
    display:flex; align-items:center; gap:10px;
    padding:18px 18px 14px;
    border-bottom:1px solid #222; flex-shrink:0;
}

.brand-icon {
    width:34px; height:34px; background:var(--accent);
    border-radius:0; display:flex; align-items:center;
    justify-content:center; font-size:0.95rem;
    color:#111; flex-shrink:0;
}

.sidebar-brand h2 { font-size:0.95rem; font-weight:700; color:var(--text-on-dark); }
.sidebar-brand h2 span { color:var(--accent); }

.sidebar-nav {
    display:flex; flex-direction:column; gap:1px;
    flex-grow:1; padding:10px 0; overflow-y:auto;
}
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:#333; }

.nav-item {
    display:flex; align-items:center; gap:11px;
    padding:10px 18px; background:transparent;
    border:none; border-left:3px solid transparent;
    color:#666; font-size:0.8rem; font-weight:500;
    cursor:pointer; text-align:left;
    transition:var(--transition); width:100%;
}
.nav-item i { font-size:0.85rem; width:15px; text-align:center; flex-shrink:0; }
.nav-item:hover { color:#ccc; background:rgba(255,255,255,0.04); border-left-color:#444; }
.nav-item.active { color:var(--accent)!important; background:rgba(245,200,0,0.07)!important; border-left-color:var(--accent)!important; font-weight:600; }
.nav-item.active i,.nav-item.active span { color:var(--accent)!important; }

.sidebar-footer {
    border-top:1px solid #1e1e1e;
    padding:12px 18px; color:#555; flex-shrink:0;
}
.sidebar-footer p { font-size:0.74rem; display:flex; align-items:center; gap:7px; }
.status-indicator-dot { width:6px; height:6px; border-radius:0; display:inline-block; }
.status-indicator-dot.online { background-color:var(--success); }
.sidebar-footer small { display:block; margin-top:3px; font-size:0.68rem; opacity:0.35; }

/* MAIN */
.main-content {
    display:flex; flex-direction:column; min-height:100vh;
    margin-left: 230px;
    width: calc(100% - 230px);
    overflow-x: hidden;
}

/* HEADER */
.app-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 24px; background:var(--card-bg);
    border-bottom:2px solid var(--accent); flex-shrink:0;
}
.app-header h1 { font-size:1rem; font-weight:700; color:var(--text); letter-spacing:-0.2px; }
.header-title p { font-size:0.74rem; color:var(--text-dim); margin-top:1px; }
.header-actions { display:flex; gap:8px; }

/* CARDS */
.card {
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:0; box-shadow:var(--shadow);
}
.card>.card-header { border-left:3px solid var(--accent); }

.card-header {
    padding:14px 18px; border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between;
    align-items:center; gap:10px; flex-wrap:wrap;
}
.card-header h2 {
    font-size:0.88rem; font-weight:700; color:var(--text);
    display:flex; align-items:center; gap:7px;
}
.card-header p { font-size:0.74rem; color:var(--text-dim); margin-top:2px; }
.card-body { padding:18px; }

.text-primary { color:var(--accent)!important; }
.text-dim { color:var(--text-dim)!important; }
.text-center { text-align:center; }

/* TAB SYSTEM */
.tab-pane { display:none; animation:fadeIn 0.18s ease; padding:18px 24px; }
.tab-pane.active { display:flex; flex-direction:column; gap:16px; width:100%; }

/* Edge-to-edge tabs override */
#tab-chat.tab-pane { padding:0; }
#tab-multiservice.tab-pane { padding:0; }

@keyframes fadeIn {
    from { opacity:0; transform:translateY(5px); }
    to   { opacity:1; transform:translateY(0); }
}

/* CHAT */
.chat-container {
    display:flex; flex-direction:column;
    height:calc(100vh - 108px); overflow:hidden;
}
.chat-header {
    display:flex; align-items:center; gap:12px;
    padding:12px 18px; border-bottom:1px solid var(--border);
    background:var(--card-bg); flex-shrink:0;
}
.bot-avatar {
    width:34px; height:34px; background:var(--accent);
    border-radius:0; display:flex; align-items:center;
    justify-content:center; font-size:0.95rem;
    position:relative; color:#111; flex-shrink:0;
}
.bot-avatar .status-indicator {
    width:8px; height:8px; background-color:var(--success);
    border:2px solid var(--card-bg); border-radius:0;
    position:absolute; bottom:-2px; right:-2px;
}
.bot-info h3 { font-size:0.88rem; font-weight:700; }
.bot-info .status-text { font-size:0.7rem; color:var(--success); font-weight:500; }

.chat-messages {
    flex-grow:1; padding:16px 18px;
    overflow-y:auto; display:flex; flex-direction:column;
    gap:10px; scroll-behavior:smooth; background:var(--bg);
}
.chat-messages::-webkit-scrollbar { width:4px; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--border); }

.message { max-width:72%; display:flex; flex-direction:column; animation:slideUp 0.18s ease; }
@keyframes slideUp {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}
.message-content {
    padding:9px 13px; border-radius:0;
    font-size:0.85rem; line-height:1.55;
    word-break:break-word; white-space:pre-line;
}
.message.user-message { align-self:flex-end; }
.message.user-message .message-content { background:var(--accent); color:#111; border:1px solid var(--accent-hover); }
.message.bot-message { align-self:flex-start; }
.message.bot-message .message-content { background:var(--card-bg); color:var(--text); border:1px solid var(--border); }
.message.system-message { align-self:center; max-width:90%; opacity:0.6; }
.message.system-message .message-content {
    background:transparent; color:var(--text-dim);
    font-size:0.74rem; text-align:center;
    padding:3px 12px; border:1px dashed var(--border);
}
.message-meta { font-size:0.68rem; color:var(--text-dim); margin-top:3px; padding:0 3px; }
.user-message .message-meta { align-self:flex-end; }
.bot-message .message-meta  { align-self:flex-start; }
.matched-rule-tag {
    display:inline-flex; align-items:center; gap:3px;
    background:var(--accent-dim); color:#7a6000;
    padding:1px 6px; font-size:0.66rem;
    margin-top:3px; font-weight:700;
}
.typing-indicator-container {
    padding:7px 18px; display:flex; align-items:center;
    gap:9px; color:var(--text-dim); font-size:0.76rem;
    background:var(--card-bg); border-top:1px solid var(--border); flex-shrink:0;
}
.typing-dots { display:flex; gap:3px; }
.typing-dots span {
    width:5px; height:5px; background:var(--accent);
    border-radius:0; animation:typing 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) { animation-delay:-0.32s; }
.typing-dots span:nth-child(2) { animation-delay:-0.16s; }
@keyframes typing {
    0%,80%,100% { transform:scale(0); }
    40% { transform:scale(1); }
}

.quick-chips {
    display:flex; gap:7px; padding:9px 18px;
    background:var(--card-bg); border-top:1px solid var(--border);
    flex-wrap:wrap; flex-shrink:0;
}
.chip {
    padding:4px 11px; background:var(--accent-dim);
    border:1px solid var(--accent-hover); font-size:0.76rem;
    color:#5a4500; cursor:pointer; transition:var(--transition);
    white-space:nowrap; display:flex; align-items:center;
    gap:4px; font-weight:600;
}
.chip:hover { background:var(--accent); color:#111; }

.chat-input-area {
    display:flex; gap:8px; padding:12px 18px;
    background:var(--card-bg); border-top:2px solid var(--accent); flex-shrink:0;
}
.chat-input-area input {
    flex-grow:1; background:var(--input-bg);
    border:1px solid var(--border); padding:9px 13px;
    color:var(--text); font-size:0.85rem;
    outline:none; transition:var(--transition);
}
.chat-input-area input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }

/* BUTTONS */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:5px; padding:8px 14px; border-radius:0;
    font-size:0.8rem; font-weight:600; cursor:pointer;
    transition:var(--transition); border:none;
    letter-spacing:0.1px; white-space:nowrap;
}
.btn-primary { background:var(--accent); color:#111; border:1px solid var(--accent-hover); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--card-bg); color:var(--text-dim); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--input-bg); color:var(--text); border-color:var(--border-dark); }
.btn-outline { background:transparent; border:1px solid var(--accent); color:#7a6000; }
.btn-outline:hover { background:var(--accent-dim); }
.btn-full-width { width:100%; }
.btn-danger-outline { background:transparent; border:1px solid var(--error); color:var(--error); }
.btn-danger-outline:hover { background:rgba(239,68,68,0.07); }

/* SETTINGS */
.settings-grid {
    display:grid; grid-template-columns:360px 1fr;
    gap:18px; height:calc(100vh - 110px);
}
.settings-left-col { display:flex; flex-direction:column; gap:14px; overflow-y:auto; }
.settings-card { padding:18px; }

.section-title {
    font-size:0.78rem; font-weight:700; margin-bottom:14px;
    display:flex; align-items:center; gap:7px;
    text-transform:uppercase; letter-spacing:0.6px; color:var(--text);
}

.form-group { margin-bottom:12px; }
.form-group label {
    display:block; font-size:0.72rem; font-weight:600;
    color:var(--text-dim); margin-bottom:4px;
    text-transform:uppercase; letter-spacing:0.5px;
}
.form-control,
.form-group input[type="text"],
.form-group select,
.form-group textarea {
    width:100%; background:var(--input-bg);
    border:1px solid var(--border); padding:8px 11px;
    color:var(--text); font-size:0.84rem;
    outline:none; transition:var(--transition);
    font-family:'Inter',sans-serif;
}
.form-group textarea { height:84px; resize:vertical; }
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.form-help { display:block; margin-top:3px; font-size:0.7rem; color:var(--text-light); }
.form-buttons { display:flex; gap:7px; }

.settings-right-col { display:flex; flex-direction:column; padding:18px; overflow:hidden; }
.rules-header {
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid var(--border); padding-bottom:12px;
    margin-bottom:12px; flex-wrap:wrap; gap:8px;
}
.rules-header .section-title { margin-bottom:0; }

.search-bar { position:relative; width:200px; }
.search-bar i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-dim); font-size:0.76rem; }
.search-bar input {
    width:100%; background:var(--input-bg);
    border:1px solid var(--border); padding:7px 9px 7px 28px;
    color:var(--text); font-size:0.8rem; outline:none;
}
.search-bar input:focus { border-color:var(--accent); }

.rules-list-container { flex-grow:1; overflow-y:auto; padding-right:3px; }
.rules-list-container::-webkit-scrollbar { width:4px; }
.rules-list-container::-webkit-scrollbar-thumb { background:var(--border); }
.rules-list { display:flex; flex-direction:column; gap:6px; }

.rule-item {
    background:var(--input-bg); border:1px solid var(--border);
    border-left:3px solid var(--accent); padding:11px 13px;
    transition:var(--transition); display:flex;
    justify-content:space-between; align-items:flex-start;
}
.rule-item:hover { background:var(--card-bg); border-color:var(--border-dark); }
.rule-info { flex-grow:1; margin-right:12px; }
.rule-badge-row { display:flex; align-items:center; gap:5px; margin-bottom:3px; }

.keyword-tag { font-weight:700; color:#111; background:var(--accent); padding:2px 7px; font-size:0.76rem; }
.match-type-tag { font-size:0.65rem; font-weight:700; padding:2px 5px; text-transform:uppercase; letter-spacing:0.5px; }
.match-type-exact    { background:rgba(34,197,94,0.12); color:#16a34a; }
.match-type-contains { background:var(--accent-dim); color:#7a6000; }
.match-type-regex    { background:rgba(139,92,246,0.12); color:#7c3aed; }

.rule-response-text { font-size:0.8rem; color:var(--text-dim); line-height:1.4; }
.rule-actions { display:flex; gap:4px; flex-shrink:0; }

.btn-icon {
    width:26px; height:26px; border-radius:0;
    background:transparent; color:var(--text-dim);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:1px solid var(--border);
    transition:var(--transition); font-size:0.76rem;
}
.btn-icon:hover { color:var(--text); border-color:var(--border-dark); }
.btn-icon.edit:hover { color:var(--accent); border-color:var(--accent); }
.btn-icon.delete:hover { color:var(--error); border-color:var(--error); }

.rules-empty-state { text-align:center; padding:2.5rem; color:var(--text-dim); }
.rules-empty-state i { font-size:2rem; margin-bottom:1rem; opacity:0.25; display:block; }

/* TOAST */
.toast {
    position:fixed; bottom:20px; right:20px;
    background:var(--text); color:#fff;
    padding:11px 16px; border-left:4px solid var(--accent);
    font-size:0.8rem; font-weight:500; z-index:9999;
    opacity:0; transform:translateX(16px);
    transition:all 0.25s ease; max-width:300px;
    box-shadow:var(--shadow-md);
}
.toast.show { opacity:1; transform:translateX(0); }

/* WHATSAPP SESSION CARDS */
#session-cards-container {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:14px;
}
.session-card {
    background:var(--card-bg); border:1px solid var(--border);
    border-top:3px solid var(--accent); padding:14px; box-shadow:var(--shadow);
}
.session-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.session-card-id { font-size:0.7rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.6px; }
.session-status-badge { font-size:0.65rem; font-weight:700; padding:3px 7px; text-transform:uppercase; letter-spacing:0.5px; }
.session-status-badge.connected    { background:rgba(34,197,94,0.12); color:#16a34a; border:1px solid rgba(34,197,94,0.3); }
.session-status-badge.waiting_qr   { background:var(--accent-dim); color:#7a6000; border:1px solid var(--accent); }
.session-status-badge.connecting   { background:rgba(139,92,246,0.12); color:#7c3aed; border:1px solid rgba(139,92,246,0.3); }
.session-status-badge.disconnected { background:rgba(239,68,68,0.1); color:var(--error); border:1px solid rgba(239,68,68,0.25); }
.session-phone { font-size:0.95rem; font-weight:700; margin-bottom:3px; }
.session-name  { font-size:0.8rem; color:var(--text-dim); margin-bottom:12px; }
.session-qr-area { background:white; border:1px solid var(--border); padding:10px; text-align:center; margin-bottom:12px; }
.session-qr-area img { max-width:150px; }
.session-qr-placeholder { color:var(--text-dim); font-size:0.76rem; padding:16px; }
.session-actions { display:flex; gap:7px; flex-wrap:wrap; }
.session-logs {
    background:#0f0f0f; border:1px solid #222;
    padding:9px 11px; font-family:'Courier New',monospace;
    font-size:0.7rem; color:#a7f3d0; max-height:72px;
    overflow-y:auto; margin-top:10px; line-height:1.6;
}

/* TABLE */
table { width:100%; border-collapse:collapse; }
th {
    padding:9px 13px; background:var(--bg);
    font-size:0.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.7px; color:var(--text-dim);
    border-bottom:2px solid var(--border);
    text-align:left; white-space:nowrap;
}
td {
    padding:9px 13px; font-size:0.82rem;
    color:var(--text); border-bottom:1px solid var(--border);
    vertical-align:middle;
}
tr:hover td { background:var(--accent-dim2); }

/* STATUS BADGES */
.status-badge { display:inline-block; padding:2px 7px; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.status-badge.outreached   { background:var(--accent-dim); color:#7a6000; border:1px solid var(--accent); }
.status-badge.engaged      { background:rgba(139,92,246,0.12); color:#7c3aed; border:1px solid rgba(139,92,246,0.3); }
.status-badge.goal-reached { background:rgba(34,197,94,0.12); color:#16a34a; border:1px solid rgba(34,197,94,0.3); }
.status-badge.pending      { background:rgba(239,68,68,0.08); color:var(--error); border:1px solid rgba(239,68,68,0.25); }

.status-dot { width:7px; height:7px; border-radius:0; display:inline-block; }
.dot-connected    { background-color:var(--success); }
.dot-waiting      { background-color:var(--warning); }
.dot-disconnected { background-color:var(--error); }
.status-connected    { background:rgba(34,197,94,0.12); color:#16a34a; }
.status-waiting      { background:var(--accent-dim); color:#7a6000; }
.status-disconnected { background:rgba(239,68,68,0.1); color:var(--error); }

/* CONSOLE */
.console-logs {
    background:#0f0f0f; border:1px solid #222;
    padding:12px; font-family:'Courier New',monospace;
    font-size:0.76rem; color:#a7f3d0; line-height:1.7;
    overflow-y:auto;
}
.console-logs div { margin-bottom:2px; word-break:break-all; }

/* MODAL */
.modal {
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    display:flex; align-items:center; justify-content:center;
    z-index:1000; backdrop-filter:blur(2px);
}
.modal-content {
    background:var(--card-bg); border:1px solid var(--border);
    border-top:3px solid var(--accent); padding:22px;
    width:90%; max-width:620px; box-shadow:var(--shadow-md);
    max-height:90vh; overflow-y:auto; animation:fadeIn 0.18s ease;
}
.modal-content h3,.modal-content h4 { color:var(--text); }
.modal-content label { color:var(--text-dim); }
.modal-content input[type="text"],
.modal-content textarea,
.modal-content select,
.modal-content .form-control { background-color:var(--input-bg); border:1px solid var(--border); color:var(--text); }
.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus,
.modal-content .form-control:focus { border-color:var(--accent); background-color:var(--card-bg); box-shadow:0 0 0 3px var(--accent-dim); }

.close-btn {
    color:var(--text-dim); font-size:1.15rem; font-weight:700;
    cursor:pointer; transition:var(--transition);
    background:none; border:none; padding:3px 7px;
}
.close-btn:hover { color:var(--error); background:rgba(239,68,68,0.07); }

/* WA TAB BUTTONS */
.tab-btn {
    padding:6px 12px; background:var(--input-bg);
    border:1px solid var(--border); color:var(--text-dim);
    font-size:0.78rem; font-weight:600; cursor:pointer;
    transition:var(--transition); white-space:nowrap;
    display:inline-flex; align-items:center; gap:5px;
}
.tab-btn:hover { background:var(--border); color:var(--text); }
.tab-btn.active { background:var(--accent-dim); border-color:var(--accent); color:#7a6000; }
.tab-add-btn { background:rgba(34,197,94,0.08); border-color:rgba(34,197,94,0.25); color:var(--success); }
.tab-add-btn:hover { background:rgba(34,197,94,0.16); }

/* TOGGLE SWITCH */
.switch { position:relative; display:inline-block; width:44px; height:22px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background-color:var(--border); transition:0.3s; }
.slider:before {
    position:absolute; content:""; height:16px; width:16px;
    left:3px; bottom:3px; background-color:white;
    transition:0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
input:checked + .slider { background-color:var(--accent); }
input:focus + .slider { box-shadow:0 0 0 3px var(--accent-dim); }
input:checked + .slider:before { transform:translateX(22px); }

/* RECEPTIONISTS GRID */
#receptionists-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }

/* GLOBAL SCROLLBARS */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); }
::-webkit-scrollbar-thumb:hover { background:var(--border-dark); }

small { font-size:0.7rem; color:var(--text-dim); }

@media (max-width:1024px) {
    .app-layout { display: flex; flex-direction: column; }
    .sidebar { 
        position: sticky; 
        top: 0; 
        width: 100%; 
        height:auto; 
        flex-direction:row; 
        align-items:center; 
        padding:0 10px; 
        border-right:none; 
        border-bottom:1px solid #222; 
    }
    .sidebar-brand { padding:12px; border-bottom:none; border-right:1px solid #222; margin-right:8px; }
    .sidebar-nav { flex-direction:row; padding:8px 0; gap:0; overflow-x:auto; }
    .sidebar-footer { display:none; }
    .main-content { margin-left: 0; width: 100%; min-height:calc(100vh - 60px); }
    .tab-pane { padding: 14px; }
    .chat-container { height:calc(100vh - 150px); }
    .settings-grid { grid-template-columns:1fr; height:auto; }
    .card-header { flex-direction: column; align-items: flex-start; }
    .card-header > div:last-child { margin-top: 10px; width: 100%; display: flex; flex-wrap: wrap; }
    .search-bar { width: 100%; margin-top: 10px; }
}

@media (max-width:768px) {
    .tab-pane { padding: 10px; }
    .app-header { padding: 12px 14px; flex-direction: column; gap: 8px; align-items: flex-start; }
    .header-actions { width: 100%; }
    .header-actions .btn { flex: 1; font-size: 0.75rem; padding: 6px 10px; }
    .nav-item span { display: none; }
    .nav-item { padding: 8px 12px; justify-content: center; }
    .nav-item i { margin: 0; }
}