/* Sangest Cloud — shared visual system. Feature styles live in workspace-*.css. */
:root {
  --green: #174d3d;
  --green-hover: #103c30;
  --green-light: #eaf3ee;
  --lime: #d5edb4;
  --ink: #1b302d;
  --muted: #647570;
  --border: #e0e7e5;
  --surface: #fff;
  --bg: #f5f7f8;
  --radius: 12px;
  --sidebar: 248px;
  --shadow: 0 3px 16px #133e3006;
}
body { font-size: 14px; color: var(--ink); background: var(--bg); }
h1 { font-size: 30px; line-height: 1.25; font-weight: 650; letter-spacing: -1.1px; }
h2 { font-size: 17px; font-weight: 650; letter-spacing: -.4px; }
h3 { font-size: 15px; }
.cloud-workspace { min-height: 100vh; }
.cloud-workspace .sidebar {
  width: var(--sidebar); padding: 28px 16px 0; background: #123e34;
  border-right: 1px solid #123e34; color: #f3f8f5;
}
.sidebar .brand { color: #fff; font-size: 32px; padding-left: 12px; gap: 12px; }
.sidebar .brand-symbol i,.sidebar .brand-symbol b { background: #d5edb4; }
.sidebar .brand-dot { color: #d5edb4; }
.sidebar .workspace-card {
  background: #ffffff07; border-color: #ffffff24; border-radius: 10px;
  padding: 12px 10px; margin: 28px 0 18px;
}
.sidebar .workspace-icon { background: #ffffff0c; border-color: #ffffff24; color: #d5edb4; width: 34px; height: 36px; }
.sidebar .workspace-card strong { font-size: 12px; color: #f2f7f4; font-weight: 600; }
.sidebar .workspace-card>div>span { font-size: 11px; color: #b7cbc3; margin-top: 4px; }
.sidebar-nav { scrollbar-color: #658b7a transparent; scrollbar-width: thin; padding-right: 2px; }
.sidebar .nav-group-label { color: #a5c2b5; font-size: 10px; letter-spacing: 1.3px; margin: 14px 12px 6px; }
.sidebar .nav-group-label:first-child { margin-top: 4px; }
.sidebar .nav-item { color: #c7d9d1; font-size: 13px; min-height: 40px; gap: 12px; padding: 9px 12px; border-radius: 8px; margin: 1px 0; }
.sidebar .nav-item svg { width: 18px; height: 18px; }
.sidebar .nav-item:hover { background: #ffffff0d; color: #fff; }
.sidebar .nav-item.is-active { background: #d5edb4; color: #183c2e; box-shadow: 0 2px 4px #061d191a; font-weight: 650; }
.sidebar .nav-count { background: #ffe8c9; color: #775119; }
.sidebar .workspace-note { color: #b7cbc3; margin: 0 10px 13px; gap: 8px; font-size: 11px; }
.sidebar .workspace-note svg { margin: 0; width: 15px; height: 15px; }
.workspace-edition { margin-left: auto; font-size: 9px; letter-spacing: 1px; border: 1px solid #ffffff24; border-radius: 4px; padding: 2px 5px; }
.sidebar .user-card { border-top-color: #ffffff24; padding: 17px 6px 20px; gap: 10px; border-radius: 0; }
.sidebar .user-card strong { color: #f0f7f3; font-size: 12px; }
.sidebar .user-card>div>span { color: #b7cbc3; font-size: 11px; }
.sidebar .user-card>svg { color: #c7d9d1; }
.sidebar .avatar-user { background: #2b5749; color: #e6f2de; width: 37px; height: 37px; border: 1px solid #668d7566; }
.sidebar a:focus-visible,.sidebar button:focus-visible { outline-color: #d5edb4; outline-offset: -2px; }
.sidebar .sidebar-close { color: #fff; }
.sidebar .sidebar-close:hover { background: #ffffff1a; }
.app-shell { min-height: 100vh; }
.topbar { height: 76px; padding: 0 32px; background: #fff; border-bottom-color: var(--border); }
.topbar-left { gap: 18px; }
.breadcrumb { gap: 10px; font-size: 13px; color: var(--muted); }
.breadcrumb-home { display: inline-flex; padding: 6px; border-radius: 6px; color: #75847e; }
.breadcrumb-home svg { width: 17px; height: 17px; }
.breadcrumb-home:hover { color: var(--green); background: var(--green-light); }
.breadcrumb strong { color: var(--ink); font-weight: 550; }
.workspace-role { border-left: 1px solid var(--border); padding-left: 18px; color: #647570; font-size: 11px; white-space: nowrap; }
.topbar-actions { gap: 13px; }
.search-trigger { min-width: 255px; min-height: 40px; padding: 9px 12px; gap: 9px; background: #f6f8f8; border: 1px solid #e7ecea; border-radius: 8px; font-size: 12px; color: #63736e; }
.search-trigger:hover { border-color: #b5cbc0; background: #f0f5f2; }
.search-trigger kbd { font-size: 10px; color: #61726b; background: #fff; border-color: #dfe6e2; padding: 2px 5px; }
.header-divider { margin: 0 2px; }
.icon-button { border-radius: 8px; min-width: 38px; min-height: 38px; color: #627770; }
.icon-button:hover { background: #eaf2ed; color: #174d3d; }
.notification-button i { width: 7px; height: 7px; background: #ca8757; right: 8px; top: 6px; }
.profile-menu summary { min-height: 40px; align-items: center; border-radius: 50%; }
.avatar { background: #edf2f0; color: #466456; font-size: 11px; font-weight: 600; }
.avatar-small { background: #e9eee7; color: #365342; width: 36px; height: 36px; font-size: 11px; border: 3px solid #fff; box-shadow: 0 0 0 1px #dfe6df; }
.profile-dropdown { top: 49px; border-radius: 12px; padding: 17px; width: 270px; box-shadow: 0 12px 35px #15392b1c; }
.profile-dropdown>strong { font-size: 14px; }
.profile-dropdown>span { font-size: 12px; }
.profile-dropdown a,.profile-dropdown button { font-size: 13px; min-height: 40px; padding: 10px 8px; }
.main-content { padding: 32px 32px 0; max-width: 1740px; }
.page-heading { align-items: flex-start; margin-bottom: 28px; gap: 24px; }
.page-heading h1 { font-size: 30px; margin-top: 7px; color: var(--ink); }
.page-heading p { color: var(--muted); font-size: 13px; line-height: 1.75; margin-top: 8px; max-width: 720px; }
.eyebrow { font-size: 10px; letter-spacing: 1.6px; color: #527467; line-height: 1.6; font-weight: 650; }
.heading-actions { gap: 9px; align-self: center; }
.date-label { font-size: 12px; color: var(--muted); }
.button,.button-small,.form-actions .button { min-height: 42px; font-size: 13px; border-radius: 8px; padding: 10px 15px; font-weight: 550; gap: 8px; }
.button svg { width: 16px; height: 16px; }
.button-primary { color: #fff; background: #174d3d; border-color: #174d3d; box-shadow: 0 2px 3px #123e3412; }
.button-primary:hover { background: #103c30; border-color: #103c30; box-shadow: 0 3px 8px #123e3422; }
.button-outline { color: #3e5a50; border-color: #dbe3df; background: #fff; }
.button-outline:hover { background: #f0f5f2; border-color: #b9cec2; color: #174d3d; }
.button-small { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.button-small svg,.button-small svg:last-child { width: 15px; height: 15px; }
.button-danger { color: #a13931; border-color: #ecd4d1; background: #fff; }
.text-link { font-size: 12px; color: #1c6248; gap: 7px; }
.panel { border-color: var(--border); box-shadow: var(--shadow); border-radius: 12px; }
.panel-heading { padding: 23px 24px 20px; gap: 16px; }
.panel-heading h2 { font-size: 16px; color: var(--ink); font-weight: 650; }
.panel-heading p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.section-icon { width: 36px; height: 36px; border-radius: 10px; background: #edf4ef; color: #47735e; }
.section-icon svg { width: 18px; height: 18px; }
.stats-grid { gap: 18px; margin-bottom: 26px; }
.stat-card { padding: 22px; border-radius: 12px; border-color: var(--border); box-shadow: var(--shadow); }
.stat-card-top { font-size: 12px; color: #52675e; gap: 8px; }
.stat-icon { width: 36px; height: 36px; border-radius: 10px; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-icon-green { color: #3a7454; background: #edf5ef; }
.stat-icon-purple { color: #7a6b9f; background: #f1eef8; }
.stat-icon-blue { color: #467b91; background: #edf5f8; }
.stat-icon-amber { color: #9b742b; background: #fbf5e8; }
.stat-number { color: var(--ink); font-size: 34px; letter-spacing: -1px; font-weight: 650; margin-top: 12px; font-variant-numeric: tabular-nums; }
.stat-card-bottom { font-size: 11px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.count-pill,.title-count { background: #edf3ef; color: #466655; font-size: 12px; border-radius: 5px; padding: 3px 7px; }
.data-table th { background: #f8faf9; border-color: #e6ece8; color: #687a71; font-size: 11px; font-weight: 600; padding-top: 13px; padding-bottom: 13px; letter-spacing: .15px; }
.data-table td,.dashboard-table td { font-size: 13px; color: #40574b; border-bottom-color: #edf1ee; padding-top: 17px; padding-bottom: 17px; }
.data-table tbody tr:hover { background: #f7faf8; }
.data-table tbody tr:focus-within { background: #f1f7f3; }
.person-cell strong,.dashboard-table .person-cell strong { color: #244235; font-size: 13px; font-weight: 600; }
.person-cell small,.dashboard-table .person-cell small { color: #697b72; font-size: 11px; }
.table-company,.dashboard-table .table-company { color: #5c7165; font-size: 12px; }
.data-table .muted { color: #64786c; }
.badge,.data-table .badge,.dashboard-table .badge { font-size: 11px; font-weight: 550; padding: 4px 8px; gap: 6px; line-height: 1.5; border-radius: 5px; }
.badge-green { color: #346147; background: #edf6ee; border-color: #dcebdd; }
.badge-blue { color: #38677e; background: #edf4f8; border-color: #dceaf2; }
.badge-amber { color: #82611b; background: #fcf6e9; border-color: #efe4c7; }
.badge-red { color: #9c483e; background: #fcf0ed; border-color: #efddd7; }
.badge-neutral { color: #606e66; background: #f2f5f3; border-color: #e4eae6; }
.badge-dot { width: 5px; height: 5px; opacity: .85; }
.empty-state { padding: 42px 24px; }
.empty-state h3 { color: #3d5f4c; font-size: 14px; }
.empty-state p { color: #65796d; font-size: 12px; max-width: 420px; margin: 8px auto 0; line-height: 1.8; }
.empty-icon { color: #829f8f; }
.panel-footer-link { color: #35644b; background: #fbfcfb; border-top-color: #e6ece8; font-size: 12px; padding: 15px; }
.field>label,.login-form .field>label { color: #334f40; font-size: 13px; font-weight: 550; margin-bottom: 8px; }
.field input:not([type=checkbox]),.field select,.field textarea { font-size: 14px; color: #243d31; min-height: 44px; border-color: #d4dfd8; border-radius: 8px; }
.field input::placeholder,.field textarea::placeholder { color: #819086; }
.field input:hover,.field select:hover,.field textarea:hover { border-color: #a6bdac; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: #557f66; box-shadow: 0 0 0 3px #557f6615; }
.field-help { color: #64766a; font-size: 12px; line-height: 1.7; }
.field input[readonly] { background: #f3f6f4; color: #627168; }
.required { color: #ac5a42; }
.record-form { padding: 28px; }
.form-grid { gap: 24px; }
.form-section-heading { gap: 14px; padding-bottom: 22px; margin-bottom: 25px; border-color: #e6ece8; }
.form-section-heading h2 { font-size: 16px; color: var(--ink); }
.form-section-heading p { color: var(--muted); font-size: 12px; }
.form-actions { border-color: #e6ece8; gap: 10px; padding-top: 24px; margin-top: 30px; }
.help-card { border-color: #dce8de; border-radius: 12px; background: #eef5ef; padding: 25px; }
.help-card h3 { color: #335a40; font-size: 14px; }
.help-card p,.help-card>span:not(.help-card-icon) { color: #5b7764; font-size: 12px; line-height: 1.8; }
.help-card-icon { background: #fff; color: #557b59; border-color: #dce8db; }
.detail-field dt { color: #697d70; font-size: 12px; }
.detail-field dd { color: #2c4838; font-size: 14px; line-height: 1.7; }
.detail-grid { gap: 25px; padding: 5px 24px 26px; }
.related-row strong { font-size: 13px; color: #2c4838; }
.related-row>div>span,.record-meta { font-size: 12px; color: #667b6b; }
.back-link { color: #587260; font-size: 12px; gap: 7px; }
.alert { font-size: 13px; line-height: 1.6; border-radius: 10px; }
.form-errors { font-size: 13px; line-height: 1.75; border-radius: 10px; }
.alert-error,.form-errors { color: #984332; background: #fff4f0; border-color: #ecd5cd; }
.alert-warning { color: #79591c; background: #fff8e9; border-color: #eddfba; }
.error-page h1 { color: var(--ink); font-size: 30px; }
.error-page p { color: var(--muted); font-size: 14px; max-width: 540px; line-height: 1.8; }
.error-icon { background: #eaf3ed; color: #467757; }
.chart-summary strong { color: var(--ink); }
.chart-label,.chart-legend,.chart-footnote,.chart-summary>div>span { color: #64776a; font-size: 12px; }
.chart-grid { color: #708274; font-size: 11px; }
.bar-track { background: #f4f7f4; border-radius: 5px 5px 0 0; }
.bar-fill { background: #b7d0bf; border-radius: 5px 5px 0 0; }
.bar-fill.bar-current { background: #3a7554; }
.bar-tooltip { font-size: 11px; background: #173e2a; }
.chart-legend i { background: #3a7554; }
.search-dialog { width: min(620px,calc(100vw - 32px)); border-radius: 14px; border: 1px solid #dce7de; box-shadow: 0 28px 80px #102b2633; }
.search-dialog::backdrop { background: #133a3259; backdrop-filter: blur(4px); }
.command-input { padding: 18px 20px; gap: 13px; }
.command-input input { font-size: 15px!important; color: var(--ink)!important; }
.search-results { max-height: min(430px,55vh); }
.search-result { padding: 14px; border-radius: 8px; }
.search-result strong { color: var(--ink); font-size: 14px; }
.search-result span,.search-hint { color: var(--muted); font-size: 12px; }
.search-hint { padding: 30px 20px; }
.search-dialog-footer { font-size: 11px; background: #f8faf9; color: #66796e; padding: 12px 20px; }
.page-footer { color: #718278; font-size: 11px; border-top-color: #e3eae5; margin-top: 32px; min-height: 68px; }
.footer-status { gap: 7px; }
.footer-status svg { width: 14px; height: 14px; }
.impersonation-banner { padding: 15px 32px; }
:is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #3c7a5b; outline-offset: 3px; }

/* Login shares the workspace typography and inputs. */
.login-page { background: #fff; }
.login-story { background: #123e34; width: 46%; padding: 44px clamp(28px,4vw,64px); }
.login-story .brand { color: #fff; font-size: 34px; }
.login-story-content { padding: 64px 0 76px; }
.login-story .eyebrow { color: #b5d0be; font-size: 10px; letter-spacing: 2px; }
.login-story h1 { font-size: clamp(40px,4.5vw,66px); line-height: 1.12; font-weight: 500; letter-spacing: -2.5px; margin-top: 24px; }
.login-story h1 em { color: #d5edb4; }
.login-story-content>p { color: #bed4c7; font-size: 14px; line-height: 1.9; max-width: 360px; }
.login-benefits { gap: 17px; margin-top: 36px; }
.login-benefits>span { font-size: 12px; color: #d3e2d9; }
.login-benefits svg { color: #d5edb4; }
.login-story-footer { color: #afcabb; font-size: 10px; }
.login-story-footer>span:last-child { color: #bdd5c3; font-size: 9px; }
.login-main { padding: 34px clamp(26px,4vw,64px) 28px; }
.login-topline { color: #688070; font-size: 10px; }
.login-topline svg { color: #688070; width: 16px; height: 16px; }
.login-box { max-width: 400px; padding: 40px 0; }
.login-welcome-icon { width: 48px; height: 48px; background: #eef5ef; color: #426d4e; border-color: #dfe9de; border-radius: 13px; }
.login-box h2 { color: #1b302d; font-size: 28px; letter-spacing: -.8px; font-weight: 650; }
.login-subtitle { color: #64766a; font-size: 13px; margin-top: 10px; }
.login-form { gap: 22px; margin-top: 30px; }
.login-form .input-icon>input { height: 48px; color: #243d31!important; font-size: 14px!important; border-color: #d4dfd8!important; border-radius: 8px; padding-left: 40px!important; }
.login-form .input-icon>svg { top: 16px; left: 14px; width: 16px; height: 16px; color: #708975; }
.login-form .input-icon>input::placeholder { color: #7d8c81; }
.login-form .password-toggle { top: 6px; right: 7px; color: #607a67; border-radius: 5px; }
.login-form .password-toggle:hover { background: #edf3ee; }
.login-form .login-submit { height: 48px; font-size: 14px; margin-top: 0; justify-content: space-between; padding-left: 18px; padding-right: 18px; }
.demo-access { margin-top: 30px; }
.divider-label { color: #657b6b; font-size: 11px; }
.demo-access>p { font-size: 12px; color: #657b6b; margin: 15px 0; }
.demo-roles { gap: 8px; }
.demo-roles button { min-height: 42px; padding: 10px 12px; border-color: #dce6dd; background: #fbfdfb; color: #406348; border-radius: 7px; font-size: 12px; }
.demo-roles button:hover { background: #eef5ec; border-color: #a7c2a8; }
.demo-roles button>svg { width: 15px; height: 15px; }
.demo-caption { font-size: 11px; color: #6c8171; line-height: 1.6; }
.login-footer { font-size: 11px; color: #6c8171; }

@media(min-width:1600px) {
  .main-content { padding: 40px 44px 0; }
  .topbar { padding: 0 44px; }
}
@media(max-width:1250px) {
  :root { --sidebar: 230px; }
  .workspace-role { display: none; }
  .main-content { padding: 28px 26px 0; }
  .topbar { padding: 0 26px; }
  .search-trigger { min-width: 230px; }
  .stat-card { padding: 18px; }
  .stats-grid { gap: 14px; }
  .page-heading { gap: 18px; }
}
@media(max-width:1000px) {
  .search-trigger { min-width: 190px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .heading-actions .button { font-size: 12px; }
  .stat-card-top { font-size: 12px; align-items: center; }
  .stat-card-bottom { min-height: 0; }
  .login-story { padding: 36px 30px; }
  .login-story h1 { font-size: 45px; }
}
@media(max-width:800px) {
  :root { --sidebar: 280px; }
  .cloud-workspace .sidebar { width: min(280px,calc(100vw - 40px)); padding-top: 27px; }
  .sidebar .nav-item { min-height: 44px; }
  .sidebar .brand { font-size: 30px; padding-right: 30px; }
  .sidebar-close { top: 27px; right: 16px; }
  .topbar { height: 66px; padding: 0 22px; }
  .topbar-left { gap: 8px; }
  .topbar-actions { gap: 8px; }
  .search-trigger { min-width: 40px; width: 40px; height: 40px; padding: 0; }
  .breadcrumb { gap: 6px; }
  .breadcrumb-home { display: none; }
  .breadcrumb>svg { display: none; }
  .breadcrumb strong { font-size: 13px; }
  .main-content { padding: 26px 22px 0; }
  .page-heading h1 { font-size: 28px; }
  .impersonation-banner { padding: 14px 22px; }
  .login-story { width: 42%; padding: 32px 24px; }
  .login-story h1 { font-size: 39px; letter-spacing: -1.5px; }
  .login-story-content>p { font-size: 13px; }
  .login-benefits>span { font-size: 11px; }
}
@media(max-width:600px) {
  .topbar { height: 62px; padding: 0 15px; }
  .topbar-actions { gap: 5px; }
  .main-content { padding: 24px 16px 0; }
  .page-heading { gap: 18px; margin-bottom: 23px; }
  .page-heading h1 { font-size: 27px; letter-spacing: -.8px; }
  .eyebrow { font-size: 10px; }
  .page-heading p { font-size: 13px; }
  .heading-actions { align-self: stretch; }
  .button,.button-small,.heading-actions .button,.form-actions .button { font-size: 13px; min-height: 44px; }
  .button { white-space: normal; }
  .button-small { padding: 8px 11px; }
  .stats-grid { gap: 12px; }
  .stat-card { padding: 17px 15px; }
  .stat-number { font-size: 30px; }
  .stat-card-top { font-size: 12px; }
  .stat-card-bottom { font-size: 11px; }
  .panel-heading { padding: 20px 18px 17px; }
  .panel-heading .button-small { font-size: 12px; min-height: 40px; }
  .panel-heading h2 { font-size: 16px; }
  .panel-heading p { font-size: 12px; }
  .record-form { padding: 23px 18px; }
  .field input:not([type=checkbox]),.field select,.field textarea { font-size: 16px!important; }
  .form-grid { gap: 22px; }
  .form-section-heading h2 { font-size: 16px; }
  .form-section-heading p { font-size: 12px; }
  .data-table td { padding-top: 15px; padding-bottom: 15px; }
  .detail-grid { padding: 5px 18px 23px; }
  .detail-field dd { font-size: 14px; }
  .detail-field dt { font-size: 12px; }
  .page-footer { font-size: 11px; gap: 10px; margin-top: 25px; }
  .impersonation-banner { padding: 12px 16px; }
  .login-story { width: 100%; padding: 24px; }
  .login-story .brand { font-size: 29px; }
  .login-story-content { padding: 25px 0 0; }
  .login-story .eyebrow { font-size: 9px; }
  .login-story h1 { margin-top: 13px; font-size: 32px; letter-spacing: -1px; max-width: 390px; }
  .login-story h1 br { display: initial; }
  .login-main { padding: 30px 24px 22px; }
  .login-box { padding: 0; }
  .login-box h2 { font-size: 26px; }
  .login-form .input-icon>input { font-size: 16px!important; }
  .login-form .login-submit { font-size: 14px; }
  .demo-roles button { min-height: 44px; }
  .login-footer { font-size: 10px; gap: 10px; margin-top: 30px; }
}