/* ENIGMA CRM — contact workspace, classic CRM layout (2026-11-02)
   Right: details column running down. Left: a long, always-open notes pad.
   Dressed in the ENIGMA package: dark header strips with a gold line, warm paper, gold focus. */

.contact-workspace{--eg-ink:#25211c;--eg-gold:#c49c62;--eg-gold-soft:#f4ead9;--eg-line:#e4d7c3;--eg-paper:#fffdf8;--eg-text:#2f2820;--eg-muted:#7b6a52}

/* Header bar */
.contact-workspace-head{background:var(--eg-ink)!important;border:0!important;border-bottom:3px solid var(--eg-gold)!important;border-radius:18px!important;padding:18px 24px!important;box-shadow:0 10px 30px #2a1f1222!important}
.contact-workspace-head h2{color:#fff!important}
.contact-workspace-head .contact-kicker{color:#e8c892!important}
.contact-workspace-head .secondary{background:#ffffff10!important;border-color:#ffffff33!important;color:#f3e9da!important}
.contact-workspace-head .primary{background:linear-gradient(135deg,#d6b178,#b8894c)!important;border:0!important;color:#20180f!important;font-weight:700}

/* Two columns: details on the right, notes on the left */
.contact-workspace-grid{grid-template-columns:minmax(330px,400px) 1fr!important;gap:18px!important;align-items:stretch!important}
.contact-details-card,.contact-activity-card{padding:0!important;overflow:hidden;border-radius:18px!important;border:1px solid var(--eg-line)!important;background:#fff!important;box-shadow:0 4px 18px #2a1f120a!important;display:flex;flex-direction:column}

/* Card header strips */
.contact-details-card>h3,.contact-tools{margin:0!important;padding:16px 22px!important;background:var(--eg-ink);color:#fff!important;border-bottom:2px solid var(--eg-gold)!important;font-size:16px!important;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}
.contact-tools strong{color:#fff;font-size:16px}
.contact-tools .secondary{background:#ffffff10!important;border-color:#ffffff33!important;color:#f3e9da!important;min-height:32px!important;padding:6px 12px!important}

/* Details column: fields run down one under another */
.contact-details-card>.contact-fields,.contact-extra{padding:0 22px}
.contact-details-card>.contact-fields{grid-template-columns:1fr!important;gap:14px!important;padding-top:20px}
.contact-extra{margin:18px 0 22px!important;border-top:1px solid var(--eg-line)!important;padding-top:14px!important}
.contact-extra .contact-fields{grid-template-columns:1fr!important;gap:14px!important}
.contact-extra summary{color:#8a6a3d!important}

/* Field rubrics */
.contact-fields label{font-size:12.5px!important;font-weight:700;color:var(--eg-muted)!important;gap:6px!important;letter-spacing:.2px}
.contact-fields input,.contact-fields select{min-height:46px!important;padding:10px 13px!important;font-size:15.5px!important;color:var(--eg-text);border:1px solid #e8dece!important;border-radius:11px!important;background:#fffefb!important;transition:border-color .15s,box-shadow .15s}
.contact-fields input:hover,.contact-fields select:hover{border-color:#d3bf9e!important}
.contact-fields input:focus,.contact-fields select:focus{outline:none!important;border-color:var(--eg-gold)!important;box-shadow:0 0 0 3px #c49c6224!important;background:#fff!important}
.contact-details-card>.contact-fields>label:first-child input{font-size:18px!important;font-weight:700;min-height:50px!important}

/* Notes: dated activity log (composer on top, history below) */
.contact-activity-card .note-log{flex:1;display:flex!important;flex-direction:column;gap:0;padding:18px 22px 8px!important;margin:0!important;background:transparent!important;border:0!important}
.note-composer{border:1px solid #ece2d2;border-radius:14px;background:var(--eg-paper);padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 2px 0 0 #dcc29a}
.note-composer:focus-within{border-color:var(--eg-gold);box-shadow:inset 2px 0 0 var(--eg-gold),0 0 0 3px #c49c6224}
.note-author{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--eg-muted)}
.note-author input{width:220px!important;min-height:36px!important;padding:6px 10px!important;font-size:14px!important;border:1px solid #e8dece!important;border-radius:9px!important;background:#fff!important}
.contact-workspace .contact-notes-editor .note-composer textarea{width:100%;box-sizing:border-box;min-height:120px!important;height:auto;field-sizing:content;max-height:50vh;resize:vertical;border:0!important;background:transparent!important;padding:4px 2px!important;font-size:16px!important;line-height:1.85!important;color:var(--eg-text);outline:none!important;box-shadow:none!important}
.note-composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.note-status{font-size:13px;color:#176554}.note-status.note-error{color:#a02c39}
.contact-workspace .note-add{background:linear-gradient(135deg,#d6b178,#b8894c)!important;border:0!important;color:#20180f!important;font-weight:700;border-radius:10px;padding:10px 20px!important}
.note-log-head{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px;font-size:13px;font-weight:700;color:var(--eg-muted)}
.note-log-head small{font-weight:400}
.note-timeline{list-style:none;margin:0;padding:0 14px 0 0;border-right:2px solid #eee3d1;display:flex;flex-direction:column;gap:12px;max-height:none}
.note-entry{position:relative;background:#fff;border:1px solid #efe6d8;border-radius:12px;padding:12px 16px}
.note-entry::before{content:"";position:absolute;right:-22px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--eg-gold);box-shadow:0 0 0 3px #fff}
.note-entry.note-system::before{background:#9fb4b5}.note-entry.note-history::before{background:#d8ccb8}
.note-entry.note-new{animation:noteIn .5s ease}
@keyframes noteIn{from{background:#fbf3e4}to{background:#fff}}
.note-entry-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.note-entry-author{font-size:14px;color:var(--eg-ink)}
.note-badge{font-size:11px;padding:2px 8px;border-radius:20px;background:#eef3f3;color:#476466}
.note-badge-history{background:var(--eg-gold-soft);color:#765b34}
.note-entry time{margin-inline-start:auto;display:flex;gap:8px;font-size:12px;color:var(--eg-muted)}
.note-entry time b{color:var(--eg-ink);font-weight:700}
.note-entry-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.8;color:var(--eg-text)}
.note-empty,.note-loading{color:var(--eg-muted);font-size:14px;padding:10px 4px}
.contact-activity-card .contact-hint{display:none}
.contact-notes-new{padding:18px 22px!important}
.contact-notes-new textarea{min-height:200px!important;font-size:16px!important;line-height:1.85!important;border:1px solid #ece2d2!important;border-radius:14px!important;background:var(--eg-paper)!important;padding:14px 16px!important}

/* Across the CRM: roomier writing fields */
.shell form textarea:not([rows="1"]):not([readonly]){min-height:180px;font-size:15px;line-height:1.8;padding:14px 16px;resize:vertical}
.shell form input:not([type=checkbox]):not([type=radio]):not([type=file]),.shell form select{min-height:46px;font-size:15px}

@media(max-width:950px){
  .contact-workspace-grid{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  .contact-details-card>.contact-fields,.contact-extra,.contact-activity-card .contact-notes-editor{padding-inline:16px!important}
  .note-author{flex-direction:column;align-items:stretch}.note-author input{width:100%!important}
  .note-entry time{margin-inline-start:0;width:100%}
}

/* Quick actions in the notes header: call, WhatsApp, SMS, documents */
.contact-actions{display:flex;gap:8px;flex-wrap:wrap}
.contact-workspace .ca-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px!important;padding:6px 13px!important;border-radius:999px;border:1px solid #ffffff2e!important;background:#ffffff0d!important;color:#f3e9da!important;font-size:13px!important;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.ca-chip svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.contact-workspace .ca-chip:hover{background:#ffffff1f!important;border-color:#c49c62!important}
.ca-phone svg{color:#e8c892}.ca-wa svg{color:#4fd47f}.ca-sms svg{color:#9ec5ff}.ca-file svg{color:#e8c892}
.ca-chip[aria-disabled=true]{opacity:.4;pointer-events:none}

/* Documents panel (details column) */
.contact-files{margin:0 22px 22px;border-top:1px solid var(--eg-line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.cf-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:#8a6a3d;font-size:15px}
.contact-workspace .cf-add{min-height:32px!important;padding:5px 12px!important;border-radius:9px;border:1px solid #e3d3b8!important;background:var(--eg-gold-soft)!important;color:#6b4f27!important;font-size:13px!important;font-weight:700}
.cf-drop{border:1.5px dashed #e3d3b8;border-radius:12px;padding:12px;text-align:center;font-size:12.5px;color:var(--eg-muted);background:var(--eg-paper)}
.cf-drop.cf-over{border-color:var(--eg-gold);background:#fbf3e4}
.cf-status{margin:0;font-size:12.5px;color:#176554;min-height:1em}
.cf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cf-item{display:flex;align-items:center;gap:6px;border:1px solid #efe6d8;border-radius:10px;background:#fff}
.contact-workspace .cf-open{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:right;background:transparent!important;border:0!important;padding:8px 12px!important;min-height:0!important;cursor:pointer}
.cf-open b{font-size:14px;color:var(--eg-ink);overflow-wrap:anywhere}.cf-open small{font-size:11.5px;color:var(--eg-muted)}
.contact-workspace .cf-del{background:transparent!important;border:0!important;color:#b9a68a!important;min-height:0!important;padding:6px 10px!important;font-size:14px!important}
.contact-workspace .cf-del:hover{color:#a02c39!important}
.cf-empty{font-size:13px;color:var(--eg-muted);padding:4px 2px}
@media(max-width:600px){.ca-chip span{display:none}.contact-files{margin-inline:16px}}

/* Sidebar: every section title is a clear, bold heading so the structure reads at a glance */
.side .nav-group,.crm-mobile-nav .nav-group{display:flex!important;align-items:center;gap:10px;color:#e8c892!important;font-size:14.5px!important;font-weight:800!important;letter-spacing:.2px!important;padding:24px 13px 10px!important;text-transform:none}
.side .nav-group::after,.crm-mobile-nav .nav-group::after{content:"";flex:1;height:1px;background:linear-gradient(to right,#c49c6266,transparent)}
[dir=rtl] .side .nav-group::after,[dir=rtl] .crm-mobile-nav .nav-group::after{background:linear-gradient(to left,#c49c6266,transparent)}

/* ENIGMA home: a little larger on desktop */
@media(min-width:900px){
  .el-hero h2{font-size:clamp(30px,2.6vw,38px)!important}
  .el-hero .el-context{font-size:17px!important}
  .el-hero-actions button{min-height:58px!important;font-size:18px!important;padding-inline:26px!important}
  .el-crm-enter{min-height:56px!important;font-size:18px!important}
  .el-threadbar .el-tb-btn{font-size:16px!important}
}