/* Independently implemented visual adaptation of the compact Frappe CRM layout.
   Uses Oviyn's own markup and API; no upstream Vue components are bundled. */
:root { --purple: #171717; --purple-deep: #383838; --purple-soft: #f1f1f1; --ink: #171717; --muted: #71717a; --line: #e4e4e7; --surface: #fff; --sidebar: 224px; --shadow: none; }
body { background: #fff; color: #171717; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; }
:focus-visible { outline-color: #a1a1aa; }
input, select, textarea { background: #f4f4f5; border: 1px solid transparent; min-height: 32px; padding: 7px 10px; border-radius: 7px; font-size: 13px; color: #27272a; }
input:focus, select:focus, textarea:focus { border-color: #a1a1aa; box-shadow: 0 0 0 2px #18181b0a; }
input::placeholder, textarea::placeholder { color: #a1a1aa; }
input:disabled, select:disabled { background: #f4f4f5; color: #a1a1aa; }
input[type=checkbox] { accent-color: #18181b; }
label, .form-grid > label, .auth-form > label { color: #52525b; font-size: 12px; font-weight: 400; }
.form-grid input, .form-grid select, .form-grid textarea { font-size: 13px; }
.required { color: #ef4444; }
.btn { min-height: 29px; padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; gap: 5px; box-shadow: none; }
.btn:hover:not(:disabled) { transform: none; }
.btn.primary { background: #171717; border-color: #171717; box-shadow: 0 1px 2px #0000000a; }
.btn.primary:hover { background: #363636; border-color: #363636; }
.btn.secondary { background: #f4f4f5; border-color: transparent; color: #3f3f46; box-shadow: none; }
.btn.secondary:hover { background: #e9e9eb; border-color: transparent; }
.btn .icon { width: 14px; height: 14px; }
.btn.small { font-size: 12px; min-height: 27px; padding: 4px 9px; }
.icon-btn { width: 28px; height: 28px; color: #71717a; border-radius: 6px; }
.icon-btn:hover, .icon-btn.soft { background: #eaeaed; color: #27272a; }
.icon-btn .icon { width: 16px; height: 16px; }
.text-link { font-size: 12px; color: #52525b; font-weight: 400; }
.text-link:hover { color: #18181b; text-decoration: underline; }
.muted, .field-hint { color: #71717a; }
.spinner { color: #71717a; }
.sidebar { padding: 8px; background: #f8f8f8; border-right: 1px solid #e4e4e7; overflow-y: auto; gap: 0; }
.workspace-user { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 6px 8px; margin: 0 0 10px; border-radius: 9px; text-align: left; }
.workspace-user:hover { background: #ededee; }
.workspace-user > img { width: 30px; height: 30px; flex-shrink: 0; }
.workspace-user-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.workspace-user-text strong { font-size: 14px; font-weight: 550; line-height: 1.2; color: #18181b; }
.workspace-user-text small { font-size: 12px; color: #71717a; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.workspace-user > .icon { width: 14px; height: 14px; color: #a1a1aa; }
.workspace-menu { position: fixed; top: 59px; left: 14px; width: 214px; padding: 5px; border: 1px solid #e4e4e7; border-radius: 9px; background: #fff; box-shadow: 0 8px 25px #00000012; display: flex; flex-direction: column; z-index: 60; }
.workspace-menu > span { font-size: 11px; padding: 9px; color: #a1a1aa; overflow-wrap: anywhere; }
.workspace-menu a, .workspace-menu button { display: flex; align-items: center; gap: 8px; padding: 8px; color: #3f3f46; font-size: 13px; border-radius: 5px; text-align: left; }
.workspace-menu a:hover, .workspace-menu button:hover { background: #f4f4f5; }
.workspace-menu .icon { width: 15px; height: 15px; }
.sidebar-search { display: flex; align-items: center; gap: 9px; padding: 7px 8px; color: #71717a; text-align: left; font-size: 13px; width: 100%; border-radius: 7px; margin-bottom: 18px; }
.sidebar-search:hover { background: #ededee; }
.sidebar-search > .icon { width: 16px; height: 16px; }
.sidebar-search kbd { margin-left: auto; background: transparent; border-color: #e4e4e7; font-size: 10px; }
.nav-caption { color: #a1a1aa; font-size: 11px; letter-spacing: 0; font-weight: 400; margin: 0 8px 9px; }
.nav-link { min-height: 29px; margin-bottom: 4px; padding: 6px 8px; gap: 9px; color: #52525b; border-radius: 7px; font-size: 13px; font-weight: 400; width: 100%; }
.nav-link .icon { width: 16px; height: 16px; color: #71717a; }
.nav-link:hover { background: #ededee; color: #18181b; }
.nav-link.active { background: #fff; color: #18181b; box-shadow: 0 1px 3px #0000000b, 0 0 0 1px #00000004; font-weight: 500; }
.nav-link.active .icon { color: #27272a; }
.nav-link small, .nav-link.active small { background: transparent; color: #a1a1aa; font-weight: 400; font-size: 11px; }
.sidebar-bottom { padding-top: 25px; padding-bottom: 4px; }
.sidebar-bottom .nav-link:last-child { margin-top: 8px; color: #a1a1aa; }
.topbar { min-height: 46px; height: 46px; padding: 0 20px; background: white; border-color: #ededee; }
.breadcrumb { gap: 9px; font-size: 13px; color: #71717a; }
.breadcrumb > .icon { width: 13px; color: #a1a1aa; }
.breadcrumb > .icon:first-of-type { width: 16px; height: 16px; color: #71717a; }
.breadcrumb strong { font-size: 13px; color: #27272a; font-weight: 400; }
.topbar-actions { gap: 8px; }
#page-actions { display: flex; gap: 7px; align-items: center; }
.topbar-avatar { padding: 0; margin-left: 5px; border-radius: 50%; }
.topbar-avatar .avatar { width: 25px; height: 25px; font-size: 10px; border-radius: 50%; }
.page { padding: 23px 24px; max-width: none; }
.page-heading { margin: 0 0 22px; align-items: center; }
.page-heading .eyebrow, .dialog-heading .eyebrow, .empty-state .eyebrow { display: none; }
.page-heading h1 { font-size: 20px; letter-spacing: -.3px; font-weight: 550; line-height: 1.4; margin: 0 0 3px; }
.page-heading p { color: #71717a; font-size: 12px; line-height: 1.5; }
.page-heading p:empty { display: none; }
.heading-actions { gap: 7px; }
.resource-page { padding: 0; }
.resource-page .page-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; margin: 0; border: 0; }
.resource-page .page-heading .heading-actions { display: none; }
.resource-page .page-heading h1 { font-size: 16px; font-weight: 500; margin: 0; }
.resource-page .page-heading p { display: none; }
.resource-page .records-panel { border: 0; border-radius: 0; box-shadow: none; min-height: calc(100dvh - 46px); }
.records-toolbar { padding: 10px 20px; gap: 15px; min-height: 49px; border-bottom-color: #ededee; }
.search-field { width: 260px; border: 1px solid transparent; background: #f4f4f5; border-radius: 7px; gap: 7px; padding: 0 8px; color: #a1a1aa; }
.search-field input { background: transparent; min-height: 28px; padding: 4px 0; font-size: 12px; box-shadow: none; border: 0; }
.search-field > .icon { width: 14px; height: 14px; }
.record-controls { gap: 8px; }
.filter-select { border: 0; background: #f4f4f5; color: #52525b; padding: 0 8px; border-radius: 7px; font-size: 12px; }
.filter-select select { padding: 5px 2px; color: #52525b; font-size: 12px; background: transparent; min-height: 28px; }
.filter-select .icon { width: 14px; height: 14px; }
.view-toggle { border-color: transparent; background: #f4f4f5; border-radius: 7px; padding: 2px; }
.view-toggle button { width: 28px; height: 25px; color: #a1a1aa; }
.view-toggle button.active { color: #3f3f46; box-shadow: 0 1px 3px #00000012; }
.records-table th { font-size: 12px; color: #71717a; background: #fff; border-color: #ededee; padding: 10px 20px; font-weight: 400; }
.records-table td { padding: 12px 20px; font-size: 13px; color: #52525b; border-color: #f1f1f2; }
.records-table tbody tr:hover { background: #fafafa; }
.record-name { gap: 9px; }
.record-name strong { color: #27272a; font-size: 13px; font-weight: 400; }
.record-name small { font-size: 11px; color: #a1a1aa; margin-top: 2px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; font-size: 10px; }
.avatar.small { border-radius: 50%; }
.avatar.large { width: 40px; height: 40px; font-size: 14px; border-radius: 50%; }
.source-label { font-size: 12px; color: #71717a; }
.records-table .amount { color: #52525b; font-weight: 400; font-size: 13px; }
.pill { font-size: 11px; padding: 3px 6px; font-weight: 400; border-radius: 5px; gap: 5px; }
.pill.positive { color: #15803d; background: #edf9f0; }.pill.danger { color: #be123c; background: #fff1f2; }.pill.amber { color: #a16207; background: #fff9e9; }.pill.neutral { color: #52525b; background: #f4f4f5; }
.pagination { padding: 10px 20px; color: #71717a; font-size: 12px; border-color: #e4e4e7; }
.pagination b { font-weight: 500; color: #3f3f46; }
.pagination .btn { font-size: 12px; }
.empty-state { min-height: 420px; padding: 90px 20px; }
.empty-illustration { margin-bottom: 15px; }
.empty-illustration > span { width: 50px; height: 50px; background: #f4f4f5; border: 0; border-radius: 12px; color: #a1a1aa; transform: none; }
.empty-illustration .icon { width: 24px; height: 24px; }
.empty-state h2 { font-size: 15px; color: #52525b; font-weight: 500; letter-spacing: 0; margin: 0 0 8px; }
.empty-state p { color: #a1a1aa; font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.empty-state > .text-link { color: #71717a; font-size: 12px; margin-top: 14px; }
.board-intro { background: white; padding: 10px 20px; color: #a1a1aa; font-size: 11px; border-color: #ededee; }
.board-intro b { color: #71717a; }
.switch-label { font-size: 11px; color: #71717a; }
.kanban { background: #fff; padding: 16px 20px; gap: 16px; min-height: calc(100dvh - 195px); }
.kanban-heading { gap: 7px; }
.kanban-heading h3 { font-size: 13px; color: #52525b; font-weight: 500; }
.stage-dot { width: 7px; height: 7px; }
.stage-count { background: #f4f4f5; color: #a1a1aa; font-size: 11px; padding: 0 5px; }
.kanban-value { font-size: 11px; color: #a1a1aa; padding: 5px 0 12px 14px; }
.kanban-dropzone { background: #fafafa; border-color: #f1f1f2; padding: 8px; border-radius: 8px; }
.kanban-dropzone.drag-over { background: #f0f0f2; border-color: #a1a1aa; }
.deal-card { border-color: #e4e4e7; box-shadow: 0 1px 2px #00000006; border-radius: 8px; }
.deal-card-main { padding: 12px; }
.deal-card-company { color: #a1a1aa; font-size: 11px; }
.deal-card h4 { color: #27272a; font-size: 13px; font-weight: 500; margin: 12px 0 9px; }
.deal-card strong { color: #52525b; font-size: 14px; font-weight: 500; }
.deal-card-bottom { border-color: #f4f4f5; color: #a1a1aa; font-size: 10px; }
.probability { color: #71717a; background: #f4f4f5; }
.column-empty { min-height: 260px; gap: 12px; }.column-empty > span { color: #b4b4bb; background: #f0f0f1; border-radius: 10px; }.column-empty p, .column-empty .text-link { color: #a1a1aa; font-size: 11px; }
.metrics-grid { gap: 16px; margin-bottom: 22px; }
.metric-card { padding: 18px 20px; border-color: #e4e4e7; border-radius: 9px; box-shadow: none; }
.metric-top { color: #71717a; font-size: 12px; }
.metric-icon, .metric-icon.purple, .metric-icon.blue, .metric-icon.green, .metric-icon.orange { color: #a1a1aa; background: transparent; }
.metric-card > strong { font-size: 25px; color: #27272a; font-weight: 500; margin: 6px 0 8px; }
.metric-card > small { font-size: 11px; color: #a1a1aa; }
.overview-columns { gap: 20px; margin-bottom: 22px; }
.panel { border-color: #e4e4e7; border-radius: 9px; box-shadow: none; }
.panel-heading { padding: 20px 20px 15px; }
.panel-heading h2 { font-size: 14px; font-weight: 500; color: #27272a; letter-spacing: 0; }
.panel-heading p { color: #a1a1aa; font-size: 12px; margin-top: 5px; }
.pipeline-summary { padding-left: 20px; }
.pipeline-summary strong { font-size: 24px; font-weight: 500; }
.pipeline-summary > span { color: #a1a1aa; font-size: 11px; }
.stage-distribution { padding: 20px; }.stage-bar-track { height: 90px; }.stage-distribution strong { font-size: 13px; color: #52525b; font-weight: 400; }.stage-distribution small { font-size: 11px; color: #71717a; }
.panel-note { background: #fafafa; border-color: #f0f0f1; font-size: 12px; color: #71717a; padding: 11px 20px; }.panel-note > .icon { color: #a1a1aa; }.panel-note strong { color: #52525b; font-weight: 500; }
.empty-inline { padding: 35px 20px; }.empty-icon, .empty-icon.green { background: #f4f4f5; color: #a1a1aa; width: 44px; height: 44px; border-radius: 11px; }.empty-inline h3 { font-size: 13px; color: #71717a; font-weight: 500; }.empty-inline p { color: #a1a1aa; font-size: 12px; margin-top: 7px; }.empty-inline .btn { margin-top: 18px; }
.activity-empty { color: #a1a1aa; padding: 20px; }.activity-empty > .icon { background: #f4f4f5; width: 22px; height: 22px; border-radius: 10px; }.activity-empty p { color: #71717a; font-size: 13px; }.activity-empty p span { color: #a1a1aa; font-size: 12px; margin-top: 4px; }
.recent-item { border-color: #f4f4f5; padding: 13px 20px; }.recent-item strong { font-size: 13px; color: #52525b; font-weight: 400; }.recent-item small { color: #a1a1aa; font-size: 11px; }.activity-dot, .activity-dot.green { background: #f4f4f5; color: #a1a1aa; }
.task-row { padding: 14px 20px; border-color: #f4f4f5; }.task-check { border-color: #d4d4d8; border-radius: 5px; }.task-check.checked { background: #18181b; border-color: #18181b; }.task-title strong { color: #52525b; font-size: 13px; font-weight: 400; }.task-title small { color: #a1a1aa; font-size: 11px; }.panel-bottom-link { background: #fafafa; color: #71717a; border-color: #f0f0f1; font-size: 12px; }
dialog { border-color: #e4e4e7; box-shadow: 0 20px 65px #00000020; border-radius: 12px; }
dialog::backdrop { background: #18181b55; backdrop-filter: none; }
.dialog-heading { border-color: #e4e4e7; padding: 20px 24px; }.dialog-heading h2 { font-size: 18px; font-weight: 550; color: #27272a; letter-spacing: -.2px; margin-top: 0; }
.dialog-body { padding: 22px 24px; }.dialog-intro { color: #71717a; font-size: 12px; margin-bottom: 20px; }
.dialog-footer { background: white; border-color: #e4e4e7; padding: 14px 24px; }.dialog-footer .btn { min-height: 29px; font-size: 12px; }
dialog.drawer { border-radius: 0; width: 620px; box-shadow: -4px 0 25px #00000010; }
.record-identity strong { color: #52525b; font-size: 13px; }.record-identity > div span { font-size: 11px; color: #a1a1aa; }
.conversion-box { border-color: #e4e4e7; background: #fafafa; border-radius: 8px; }.conversion-box > div { color: #71717a; font-size: 12px; }.conversion-box .btn, .conversion-box .text-link { font-size: 12px; }
.record-activity { border-color: #e4e4e7; }.section-title h3 { font-size: 14px; font-weight: 500; }.section-title span { color: #a1a1aa; font-size: 11px; }.note-compose { border-color: #e4e4e7; }.note-compose textarea { background: white; font-size: 13px; }
.timeline-item:not(:last-child)::before { background: #e4e4e7; }.timeline-dot { background: #f4f4f5; color: #a1a1aa; }.timeline-item strong { color: #52525b; font-size: 12px; font-weight: 400; }.timeline-item small { color: #a1a1aa; font-size: 11px; }.note-text { background: #fafafa; color: #52525b; border-color: #ededee; font-size: 13px; }
.report-caption { color: #a1a1aa; font-size: 12px; }.report-bar-row > div:first-child span, .report-bar-row strong { color: #52525b; font-size: 12px; }.horizontal-track { background: #f4f4f5; }.report-bar-row small { font-size: 11px; color: #a1a1aa; }.insight-note { background: #fafafa; border-color: #ededee; color: #71717a; font-size: 11px; }
.settings-grid { border-color: #e4e4e7; }.settings-grid > div:first-child h2 { font-size: 14px; font-weight: 500; }.settings-grid > div:first-child p { color: #71717a; font-size: 12px; }.settings-form h3 { font-weight: 500; font-size: 14px; }.settings-form > p.muted { font-size: 13px; }.backup-icon { color: #71717a; background: #f4f4f5; border-radius: 9px; }
.guide-step > span { color: #71717a; background: #f4f4f5; border-radius: 9px; }.guide-step h3 { font-size: 13px; color: #3f3f46; font-weight: 500; }.guide-step p { color: #71717a; font-size: 12px; }.guide-tip { color: #71717a; font-size: 12px; background: #fafafa; }
.search-dialog-header { border-color: #e4e4e7; color: #a1a1aa; }.search-dialog-header input { background: white; }.kbd-button { color: #a1a1aa; border-color: #e4e4e7; }.search-result:hover { background: #f4f4f5; }.search-result-icon { color: #71717a; background: #f4f4f5; border-radius: 7px; }.search-result strong { color: #52525b; font-size: 13px; font-weight: 400; }.search-result small, .result-type { color: #a1a1aa; font-size: 11px; }.search-result > .icon { color: #a1a1aa; }.search-prompt { color: #71717a; font-size: 13px; }.search-prompt span { color: #a1a1aa; font-size: 12px; }.search-footer { background: #fafafa; border-color: #e4e4e7; color: #a1a1aa; font-size: 11px; }
.upload-zone { border-color: #d4d4d8; background: #fafafa; }.upload-zone > .icon { color: #a1a1aa; }.upload-zone strong { color: #52525b; font-size: 13px; }.upload-zone > span { color: #a1a1aa; font-size: 12px; }.upload-zone:focus-within, .upload-zone.drag-over { border-color: #71717a; background: #f4f4f5; }.file-ready { background: #f0fdf4; color: #15803d; font-size: 12px; }.import-mapping label { color: #71717a; font-size: 12px; }.import-mapping select { font-size: 12px; }
.auth-layout { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100dvh; background: #fafafa; padding: 42px 20px; gap: 24px; }
.auth-brand { display: flex; align-items: center; gap: 10px; color: #27272a; font-size: 20px; font-weight: 550; letter-spacing: -.4px; }.auth-brand img { width: 34px; height: 34px; }
.auth-form { background: white; border: 1px solid #e4e4e7; border-radius: 12px; box-shadow: 0 2px 5px #00000005; width: 380px; max-width: 100%; padding: 27px; }
.auth-form h1 { font-size: 18px; font-weight: 550; letter-spacing: -.3px; margin-bottom: 8px; }.auth-form > p.muted { font-size: 12px; color: #71717a; margin-bottom: 23px; line-height: 1.6; }.auth-form > label { font-size: 12px; color: #52525b; margin-top: 16px; }.auth-form input, .auth-form select { background: #f4f4f5; border-color: transparent; min-height: 33px; font-size: 13px; }.auth-submit { min-height: 33px; margin-top: 24px; justify-content: center; font-size: 13px; }.auth-note { color: #a1a1aa; font-size: 11px; text-align: center; justify-content: center; margin-top: 17px; }.password-field button { color: #71717a; top: 5px; font-size: 11px; }.auth-caption { color: #a1a1aa; font-size: 12px; }
#toast { background: #27272a; border: 1px solid #3f3f46; font-size: 13px; border-radius: 9px; }#toast.error { background: #881337; border-color: #9f1239; }
@media (min-width: 761px) {
  .sidebar-collapsed { --sidebar: 56px; }
  .sidebar-collapsed .sidebar { padding: 8px; }
  .sidebar-collapsed .workspace-user { padding: 6px 5px; gap: 0; }
  .sidebar-collapsed .workspace-user-text, .sidebar-collapsed .workspace-user > .icon, .sidebar-collapsed .nav-caption, .sidebar-collapsed .nav-link > span, .sidebar-collapsed .nav-link > small, .sidebar-collapsed .sidebar-search > span, .sidebar-collapsed .sidebar-search > kbd { display: none; }
  .sidebar-collapsed .sidebar-search, .sidebar-collapsed .nav-link { justify-content: center; padding: 7px; }
  .sidebar-collapsed .workspace-menu { left: 60px; }
}
@media (max-width: 1000px) { .overview-columns { grid-template-columns: 1fr; }.metrics-grid { grid-template-columns: repeat(2,1fr); }.settings-grid { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 760px) {
  .app-shell { --sidebar: 0px; }.sidebar { width: 224px; padding: 8px; }.sidebar.mobile-open { transform: translateX(0); }
  .topbar { height: 46px; min-height: 46px; padding: 0 12px; }.breadcrumb { font-size: 12px; gap: 7px; }.topbar-actions { gap: 5px; }.mobile-menu { display: inline-flex; }
  .topbar-actions > .icon-btn { display: none; }#page-actions .btn.secondary { font-size: 0; padding: 5px 7px; }#page-actions .btn.primary { font-size: 12px; }#page-actions .btn .icon { width: 14px; height: 14px; }
  .page { padding: 20px 16px; }.page-heading { gap: 12px; }.page-heading h1 { font-size: 19px; }.page-heading p { font-size: 12px; }
  .resource-page { padding: 0; }.resource-page > .page-heading { height: 1px; padding: 0; }.resource-page .page-heading h1 { font-size: 15px; }
  .records-toolbar { padding: 10px 14px; gap: 9px; flex-wrap: wrap; }.search-field { width: 180px; flex: 1 1 130px; }.search-field input { font-size: 12px; }.record-controls { gap: 6px; }.filter-select select { font-size: 11px; max-width: 120px; }.record-controls > .icon-btn { display: inline-flex; }
  .metrics-grid { gap: 12px; }.metric-card { padding: 16px; }.metric-top { font-size: 11px; }.metric-card > strong { font-size: 23px; }.metric-card > small { font-size: 11px; }
  .kanban { padding: 14px; gap: 12px; }.kanban-column { flex: 0 0 250px; }.board-intro { padding: 10px 14px; font-size: 11px; flex-direction: column; }.switch-label { font-size: 11px; }
  .pagination { padding: 11px 14px; font-size: 11px; }.pagination > div { gap: 8px; }.pagination .btn { font-size: 11px; }
  .empty-state { padding: 70px 20px; min-height: 360px; }.empty-state h2 { font-size: 15px; }.empty-state p { font-size: 13px; }.panel-heading p { font-size: 12px; }.stage-distribution small { font-size: 10px; }
  .auth-layout { padding: 30px 20px; }.auth-form { padding: 24px; }.auth-brand { font-size: 19px; }.auth-form input, .auth-form select { font-size: 14px; min-height: 36px; }
  dialog.drawer { width: 100%; }.dialog-heading { padding: 18px 20px; }.dialog-body { padding: 20px; }.dialog-footer { padding: 14px 20px; }.dialog-heading h2 { font-size: 18px; }.form-grid > label { font-size: 12px; }.form-grid input, .form-grid select { font-size: 13px; }
}