:root {
  --crm-ink: #10213f;
  --crm-muted: #60708a;
  --crm-line: #dfe5ee;
  --crm-bg: #f3f6fa;
  --crm-panel: #ffffff;
  --crm-blue: #1f62d5;
  --crm-blue-dark: #17499f;
  --crm-green: #157a56;
  --crm-amber: #a85d00;
  --crm-red: #b52a3c;
  --crm-cyan: #087f8c;
  --crm-sidebar: #11274d;
  --crm-radius: 8px;
  --crm-shadow: 0 12px 30px rgba(23, 45, 83, 0.09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--crm-ink);
  background: var(--crm-bg);
}

* { box-sizing: border-box; }

body.crm-body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--crm-ink);
  background: var(--crm-bg);
  letter-spacing: 0;
}

button,
input,
select,
textarea { font: inherit; letter-spacing: 0; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }

[hidden] { display: none !important; }

.crm-skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  color: #fff;
  background: #000;
}

.crm-skip-link:focus { top: 12px; }

.crm-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
  background: #fff;
}

.crm-login-brand {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vw, 76px);
  color: #fff;
  background: var(--crm-sidebar);
}

.crm-login-brand img {
  width: min(290px, 85%);
  filter: brightness(0) invert(1);
}

.crm-login-brand h1 {
  max-width: 640px;
  margin: 40px 0 18px;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.03;
}

.crm-login-brand p {
  max-width: 580px;
  color: #c9d6ec;
  font-size: 17px;
  line-height: 1.7;
}

.crm-login-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.crm-login-proof span {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 4px;
  color: #dce7f8;
  font-size: 12px;
}

.crm-login-main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #f7f9fc;
}

.crm-login-card {
  width: min(440px, 100%);
  padding: 34px;
  border: 1px solid var(--crm-line);
  border-radius: var(--crm-radius);
  background: #fff;
  box-shadow: var(--crm-shadow);
}

.crm-login-card h2 { margin: 8px 0; font-size: 28px; }
.crm-login-card > p { margin: 0 0 28px; color: var(--crm-muted); line-height: 1.6; }
.crm-login-card form { display: grid; gap: 16px; }

.crm-eyebrow {
  display: inline-block;
  color: var(--crm-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.crm-field { display: grid; gap: 7px; min-width: 0; }
.crm-field > span,
.crm-field > label { color: #314461; font-size: 12px; font-weight: 700; }

.crm-field input,
.crm-field select,
.crm-field textarea,
.crm-control {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #cfd8e6;
  border-radius: 6px;
  color: var(--crm-ink);
  background: #fff;
  outline: none;
}

.crm-field textarea { min-height: 92px; resize: vertical; }

.crm-field input:focus,
.crm-field select:focus,
.crm-field textarea:focus,
.crm-control:focus {
  border-color: var(--crm-blue);
  box-shadow: 0 0 0 3px rgba(31, 98, 213, .12);
}

.crm-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  background: var(--crm-blue);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.crm-btn:hover { background: var(--crm-blue-dark); }
.crm-btn:disabled { cursor: wait; opacity: .55; }
.crm-btn.secondary { color: var(--crm-ink); border-color: #ccd6e5; background: #fff; }
.crm-btn.secondary:hover { border-color: #9fb0c8; background: #f7f9fc; }
.crm-btn.ghost { color: #40516b; border-color: transparent; background: transparent; }
.crm-btn.ghost:hover { background: #e9eef5; }
.crm-btn.danger { background: var(--crm-red); }
.crm-btn.success { background: var(--crm-green); }
.crm-btn.small { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.crm-btn.wide { width: 100%; }

.crm-form-message { min-height: 20px; margin: 0; color: var(--crm-muted); font-size: 13px; }
.crm-form-message.error { color: var(--crm-red); }
.crm-form-message.success { color: var(--crm-green); }

.crm-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
}

.crm-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  color: #fff;
  background: var(--crm-sidebar);
  overflow-y: auto;
  z-index: 50;
}

.crm-sidebar-brand {
  display: block;
  padding: 0 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.crm-sidebar-brand img {
  display: block;
  width: 174px;
  max-width: 100%;
  filter: brightness(0) invert(1);
}

.crm-portal-label {
  display: block;
  margin: 9px 0 0;
  color: #aebfda;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.crm-nav { display: grid; gap: 3px; padding: 18px 0; }

.crm-nav button {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 5px;
  color: #cbd7e9;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 650;
}

.crm-nav button:hover { color: #fff; background: rgba(255,255,255,.08); }
.crm-nav button.active { color: #fff; background: #2357ad; }

.crm-sidebar-footer {
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #aebfda;
  font-size: 11px;
  line-height: 1.5;
}

.crm-workspace { min-width: 0; }

.crm-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--crm-line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
}

.crm-topbar h1 { margin: 0; font-size: 20px; }
.crm-topbar p { margin: 3px 0 0; color: var(--crm-muted); font-size: 12px; }
.crm-topbar-actions { display: flex; align-items: center; gap: 8px; }

.crm-user-chip {
  min-width: 0;
  max-width: 240px;
  padding: 7px 10px;
  border: 1px solid var(--crm-line);
  border-radius: 6px;
  background: #f8fafc;
  color: #384b68;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-menu-toggle { display: none; }

.crm-content { padding: 24px clamp(16px, 2.5vw, 34px) 48px; }
.crm-view { min-width: 0; }

.crm-view-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.crm-view-head h2 { margin: 0 0 5px; font-size: 22px; }
.crm-view-head p { margin: 0; color: var(--crm-muted); font-size: 13px; }
.crm-view-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.crm-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.crm-stat {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--crm-line);
  border-radius: var(--crm-radius);
  background: var(--crm-panel);
  box-shadow: 0 5px 16px rgba(30, 52, 86, .045);
}

.crm-stat span { color: var(--crm-muted); font-size: 12px; font-weight: 650; }
.crm-stat strong { font-size: 28px; line-height: 1; }
.crm-stat small { color: #8996a9; font-size: 10px; }
.crm-stat.attention { border-top: 3px solid var(--crm-red); }
.crm-stat.today { border-top: 3px solid var(--crm-amber); }
.crm-stat.positive { border-top: 3px solid var(--crm-green); }
.crm-stat.info { border-top: 3px solid var(--crm-blue); }

.crm-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 16px;
  margin-top: 18px;
}

.crm-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--crm-line);
  border-radius: var(--crm-radius);
  background: var(--crm-panel);
  box-shadow: 0 5px 18px rgba(30, 52, 86, .045);
}

.crm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.crm-panel-head h3 { margin: 0; font-size: 15px; }
.crm-panel-head span { color: var(--crm-muted); font-size: 11px; }

.crm-status-list { display: grid; gap: 9px; }
.crm-status-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(80px, 2fr) 34px; gap: 9px; align-items: center; font-size: 12px; }
.crm-status-track { height: 7px; border-radius: 4px; background: #edf1f6; overflow: hidden; }
.crm-status-fill { height: 100%; background: var(--crm-cyan); }
.crm-status-row strong { text-align: right; }

.crm-toolbar {
  display: grid;
  grid-template-columns: minmax(210px, 2fr) minmax(170px, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.crm-table-panel {
  min-width: 0;
  border: 1px solid var(--crm-line);
  border-radius: var(--crm-radius);
  background: #fff;
  overflow: hidden;
}

.crm-table-status {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--crm-line);
  color: var(--crm-muted);
  font-size: 11px;
}

.crm-table-wrap { overflow-x: auto; }

.crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.crm-table th,
.crm-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e8edf4;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.crm-table th {
  position: sticky;
  top: 0;
  color: #50617b;
  background: #f6f8fb;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.crm-table tr:last-child td { border-bottom: 0; }
.crm-table tbody tr:hover { background: #f8faff; }
.crm-table td.wrap { max-width: 260px; white-space: normal; }
.crm-table .empty { height: 150px; color: var(--crm-muted); text-align: center; }

.crm-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #d9e2ef;
  border-radius: 4px;
  color: #455771;
  background: #f5f7fa;
  font-size: 10px;
  font-weight: 750;
}

.crm-badge.red { color: #8c2030; border-color: #f1c4cb; background: #fff1f3; }
.crm-badge.amber { color: #7d4800; border-color: #f4d39c; background: #fff8e9; }
.crm-badge.green { color: #0f6244; border-color: #bce3d3; background: #edfaf5; }
.crm-badge.blue { color: #17499f; border-color: #c5d8f6; background: #eff5ff; }

.crm-empty-block {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--crm-muted);
  text-align: center;
}

.crm-drawer-backdrop,
.crm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(7, 18, 36, .52);
}

.crm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 110;
  width: min(720px, 94vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -18px 0 50px rgba(0,0,0,.18);
}

.crm-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-drawer-head h2 { margin: 4px 0; font-size: 22px; }
.crm-drawer-head p { margin: 0; color: var(--crm-muted); font-size: 12px; }
.crm-icon-btn { width: 36px; height: 36px; border: 1px solid var(--crm-line); border-radius: 5px; background: #fff; font-size: 23px; line-height: 1; }

.crm-drawer-body { padding: 20px 22px 40px; overflow-y: auto; }
.crm-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.crm-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-detail-item { min-width: 0; }
.crm-detail-item span { display: block; margin-bottom: 4px; color: var(--crm-muted); font-size: 10px; text-transform: uppercase; }
.crm-detail-item strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.crm-detail-item.full { grid-column: 1 / -1; }

.crm-drawer-section { padding: 20px 0; border-bottom: 1px solid var(--crm-line); }
.crm-drawer-section:last-child { border-bottom: 0; }
.crm-drawer-section h3 { margin: 0 0 12px; font-size: 15px; }
.crm-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.crm-inline-actions .crm-field { flex: 1 1 180px; }

.crm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.crm-form-grid .full { grid-column: 1 / -1; }
.crm-form-actions { display: flex; justify-content: flex-end; gap: 8px; grid-column: 1 / -1; }

.crm-timeline { display: grid; gap: 0; }
.crm-timeline-item { position: relative; padding: 0 0 18px 22px; border-left: 1px solid #ccd7e6; }
.crm-timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.crm-timeline-item::before { content: ""; position: absolute; left: -5px; top: 2px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--crm-blue); box-shadow: 0 0 0 1px var(--crm-blue); }
.crm-timeline-item strong { font-size: 12px; }
.crm-timeline-item p { margin: 5px 0; color: #43536c; font-size: 12px; line-height: 1.55; }
.crm-timeline-item small { color: var(--crm-muted); font-size: 10px; }

.crm-modal {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 120;
  width: min(620px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  padding: 22px;
  border-radius: var(--crm-radius);
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
  transform: translate(-50%, -50%);
  overflow-y: auto;
}

.crm-modal-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.crm-modal-head h2 { margin: 0; font-size: 20px; }
.crm-modal-head p { margin: 5px 0 0; color: var(--crm-muted); font-size: 12px; }

.crm-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 15px;
  border-radius: 6px;
  color: #fff;
  background: #172943;
  box-shadow: var(--crm-shadow);
  font-size: 13px;
}

.crm-toast.error { background: var(--crm-red); }
.crm-toast.success { background: var(--crm-green); }

.crm-loading {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--crm-muted);
  font-size: 13px;
}

.crm-spinner {
  width: 24px;
  height: 24px;
  margin: 0 auto 10px;
  border: 3px solid #dce4ef;
  border-top-color: var(--crm-blue);
  border-radius: 50%;
  animation: crm-spin .75s linear infinite;
}

@keyframes crm-spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .crm-stat-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .crm-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .crm-login-page { grid-template-columns: 1fr; }
  .crm-login-brand { min-height: auto; padding: 34px 28px; }
  .crm-login-brand h1 { margin-top: 36px; font-size: 38px; }
  .crm-login-brand p { font-size: 15px; }
  .crm-login-main { min-height: auto; padding: 32px 18px 50px; }
  .crm-shell { grid-template-columns: 1fr; }
  .crm-sidebar { position: fixed; left: 0; width: 236px; transform: translateX(-100%); transition: transform .2s ease; }
  .crm-sidebar.open { transform: translateX(0); }
  .crm-menu-toggle { display: inline-flex; }
  .crm-topbar { padding: 10px 14px; }
  .crm-topbar-actions .crm-user-chip { display: none; }
  .crm-content { padding: 18px 14px 36px; }
  .crm-stat-grid { grid-template-columns: repeat(2, minmax(135px, 1fr)); }
  .crm-toolbar { grid-template-columns: 1fr 1fr; }
  .crm-toolbar .crm-btn { grid-column: 1 / -1; }
  .crm-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .crm-login-card { padding: 24px 20px; }
  .crm-topbar h1 { font-size: 17px; }
  .crm-topbar p { display: none; }
  .crm-topbar-actions .secondary { display: none; }
  .crm-view-head { align-items: flex-start; flex-direction: column; }
  .crm-view-actions { width: 100%; }
  .crm-view-actions .crm-btn { flex: 1; }
  .crm-stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .crm-stat { min-height: 106px; padding: 13px; }
  .crm-stat strong { font-size: 24px; }
  .crm-toolbar { grid-template-columns: 1fr; }
  .crm-toolbar .crm-btn { grid-column: auto; }
  .crm-drawer { width: 100vw; }
  .crm-drawer-head,
  .crm-drawer-body { padding-left: 16px; padding-right: 16px; }
  .crm-detail-grid,
  .crm-form-grid { grid-template-columns: 1fr; }
  .crm-detail-item.full,
  .crm-form-grid .full,
  .crm-form-actions { grid-column: auto; }
  .crm-form-actions { flex-direction: column-reverse; }
  .crm-form-actions .crm-btn { width: 100%; }
}

/* Responsive hardening */
html,body.crm-body{max-width:100%;overflow-x:hidden}.crm-body h1,.crm-body h2,.crm-body h3,.crm-body p,.crm-body span,.crm-body strong,.crm-body label,.crm-body button,.crm-body a{overflow-wrap:anywhere}.crm-workspace,.crm-content,.crm-view,.crm-panel,.crm-card,.crm-table-panel,.crm-drawer,.crm-modal{min-width:0}.crm-sidebar-brand img,.crm-login-brand img{height:auto}.crm-btn{max-width:100%;text-align:center}.crm-table-wrap{-webkit-overflow-scrolling:touch}.crm-table{min-width:760px}.crm-table td.wrap{overflow-wrap:anywhere}.crm-drawer-body,.crm-modal{overscroll-behavior:contain}
@media (max-width: 860px) {
  .crm-login-brand{min-height:auto}.crm-login-main{min-height:auto}.crm-login-page{min-height:100vh}.crm-shell{min-height:100vh}.crm-sidebar{top:0;height:100dvh;max-width:86vw}.crm-workspace{width:100%}.crm-topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--crm-line)}.crm-topbar-actions{flex-wrap:wrap;justify-content:flex-end}.crm-view-actions{display:flex;flex-wrap:wrap;gap:8px}.crm-overview-grid,.crm-toolbar,.crm-status-row{min-width:0}.crm-table-panel{border-radius:8px}.crm-drawer{height:100dvh}.crm-modal{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
}
@media (max-width: 560px) {
  .crm-login-brand{padding:28px 20px}.crm-login-brand h1{font-size:32px;line-height:1.08}.crm-login-brand p{line-height:1.55}.crm-login-proof span{white-space:normal}.crm-login-main{padding:22px 12px 36px}.crm-login-card{width:100%;padding:22px 18px}.crm-shell{display:block}.crm-content{padding:16px 12px 32px}.crm-topbar{align-items:flex-start;gap:10px}.crm-topbar-actions{width:100%}.crm-topbar-actions .crm-btn,.crm-view-actions .crm-btn{flex:1 1 140px}.crm-view-head{gap:12px}.crm-stat-grid{grid-template-columns:1fr}.crm-stat{min-height:auto}.crm-toolbar{padding:12px}.crm-table-head{padding:16px}.crm-table{min-width:680px}.crm-drawer{width:100vw;max-width:none}.crm-drawer-head{gap:12px}.crm-drawer-head h2{font-size:19px}.crm-quick-actions .crm-btn,.crm-inline-actions .crm-btn{flex:1 1 150px}.crm-modal{inset:auto 0 0 0;width:100vw;max-height:92dvh;border-radius:12px 12px 0 0;padding:18px;transform:none}.crm-modal-head{align-items:flex-start}.crm-icon-btn{flex:0 0 auto}.crm-toast{left:12px;right:12px;bottom:12px;max-width:none}.crm-detail-grid,.crm-form-grid{gap:10px}.crm-field input,.crm-field select,.crm-field textarea,.crm-control{font-size:16px}
}

/* Stacked logo sizing */
.crm-login-brand img{width:190px;max-width:72%;padding:10px;border-radius:8px;background:rgba(255,255,255,.95);filter:none}.crm-sidebar-brand{display:grid;justify-items:center;gap:8px}.crm-sidebar-brand img{width:96px;max-width:100%;padding:6px;border-radius:8px;background:rgba(255,255,255,.96);filter:none}.crm-portal-label{text-align:center}
@media (max-width: 560px){.crm-login-brand img{width:150px}.crm-sidebar-brand img{width:84px}}