/* ChipVista visual system. Loaded after component styles. */
:root {
  --bg: #f4f5fa;
  --surface: #fff;
  --ink: #25243c;
  --muted: #77798e;
  --line: #e6e8f1;
  --green: #5144a2;
  --green-soft: #eeecfa;
  --navy: #292451;
  --radius: 14px;
  --accent: #6355bb;
  --shadow: 0 3px 6px #27234c03, 0 12px 32px -22px #27234c30;
}
body {background:var(--bg);color:var(--ink);font-family:'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
::selection {background:#ded8f6;color:#30285e}
h1,h2,h3 {color:var(--ink)}
h2 {font-weight:650;letter-spacing:-.35px}
small,.muted {color:var(--muted)}
:focus-visible {outline:2px solid #8274cf;outline-offset:3px}
input,select,textarea {border-color:#dfe1ed;border-radius:9px;background:#fff;transition:border-color .18s,box-shadow .18s;color:var(--ink)}
input::placeholder,textarea::placeholder {color:#9496aa}
input:hover,select:hover,textarea:hover {border-color:#bcb7d6}
input:focus,select:focus,textarea:focus {border-color:#8677c8;outline:0;box-shadow:0 0 0 3px #6d5cba14}
input[type=checkbox] {accent-color:var(--accent)}
label {color:#57566e;font-weight:600}
input[type=file]::file-selector-button {border:0;border-radius:6px;background:var(--green-soft);color:#5144a2;padding:7px 10px;margin-right:10px;font:inherit;cursor:pointer}
.button {min-height:35px;padding:8px 14px;border:1px solid #dedfeb;border-radius:9px;color:#55536e;background:#fff;font-size:12px;font-weight:600;box-shadow:0 1px 2px #25204d05;transition:background .18s,border-color .18s,box-shadow .18s}
.button:hover {transform:none;filter:none;background:#f5f3fc;border-color:#cfc7e9;box-shadow:0 3px 10px #39276b0b}
.button.primary,.primary {background:linear-gradient(135deg,#54449f,#39316e);border-color:#514393;color:#fff;box-shadow:0 4px 10px #4c3c9626,inset 0 1px 0 #ffffff18}
.button.primary:hover {background:linear-gradient(135deg,#6553b4,#463983);border-color:#6553b4;color:#fff;box-shadow:0 5px 14px #4c3c9630}
.button.danger {background:#b74965;border-color:#b74965;color:white}
.button.danger:hover {background:#a43855;border-color:#a43855}
.icon-button {border-radius:8px;color:#77718e}
.icon-button:hover {background:#efecf8;color:#5144a2}
.ui-icon {stroke-width:1.65}
.text-link,.card-head a {color:#5d50a8}
.text-link:hover,.card-head a:hover {color:#352776}
.badge {padding:4px 9px;border:1px solid #e5dff6;border-radius:6px;background:#f0ecfa;color:#675495;font-size:10px;font-weight:600;line-height:1.3}

/* Keep the established sidebar and active marker. */
.sidebar {background:linear-gradient(170deg,#fff,#f9f8fd);border-right-color:#e4e3ef;box-shadow:4px 0 20px #30295803}
.brand {border-bottom-color:#eae7f3}
.brand-name {color:#30285d}
.brand-name small {color:#858097;letter-spacing:1.4px}
.sidebar .nav-item {color:#77728a;border-radius:9px}
.sidebar .nav-item:hover {background:#eeebf8;color:#4a3d87}
.sidebar .nav-item.active,.sidebar .nav-item.active:hover {background:transparent;color:#4e58b6}
.sidebar .nav-item.active::before,.sidebar .nav-item:hover::before {background:#5a64cf;width:3px}
.avatar {background:#ede9f9;border-color:#dfd8f1;color:#635097}
.sidebar-resizer span {background:#c9c4dc}
.topbar.unified-page-header {background:linear-gradient(180deg,#f4f5fa,#f4f5faee);padding:18px 16px 16px;min-height:78px}
.page-header-title h1 {font-size:21px;font-weight:650;letter-spacing:-.7px;line-height:1.3}
.unified-page-header .breadcrumb {padding:8px 13px;border:1px solid #e5e3f0;background:#ffffffb0;border-radius:24px;box-shadow:0 2px 8px #30234b03;font-size:10px;color:#8a839c;gap:10px}
.breadcrumb strong {color:#625578;font-weight:600}
.header-search-toggle {background:#fff;border-color:#e0dfea;border-radius:9px;color:#74688e}
.page-header-controls select,.page-header-controls input[type=search] {height:35px;padding:7px 10px;background:#fff}
.page-header-controls .header-direct-action {font-size:11px}

/* Shared surfaces across all modules. */
main .card {border-color:var(--line);border-radius:14px;box-shadow:var(--shadow);background:var(--surface)}
.card-head {padding:18px 20px;border-bottom-color:#eeedf5;background:linear-gradient(135deg,#fff,#fdfcfe)}
.card-head h2 {font-size:14px;letter-spacing:-.25px}
.card-head a {font-size:10px}
.card-head>.muted {font-size:10px}
main table {font-variant-numeric:tabular-nums}
main table th {padding:13px 16px;background:#f8f8fc;color:#858398;font-size:9px;letter-spacing:.9px;border-bottom-color:#e9e8f1}
main table td {padding:14px 16px;border-bottom-color:#efedf5;font-size:11px;color:#5b586e}
main table tbody tr {transition:background .15s}
main table tbody tr:hover {background:#f8f6fd}
main table td strong {color:#38334e;font-weight:600}
.table-wrap {border-radius:inherit}
.empty {padding:45px 24px}
.empty-symbol {background:#f3f0fb;border-color:#e4def3;color:#8d7cb3;border-radius:14px}
.empty h3 {font-size:14px;font-weight:600}
.empty p {font-size:11px;line-height:1.7}
.record-count {background:#edeafa;color:#72639c;border-radius:6px}

/* Dashboard: intentional hierarchy, quiet depth and distinct totals. */
.metric-grid {gap:12px;margin-bottom:20px}
.metric-card {position:relative;overflow:hidden;padding:19px 18px 17px;border:1px solid #e5e5ef;border-radius:14px;background:linear-gradient(140deg,#fff,#fdfcfe);box-shadow:var(--shadow)}
.metric-card::before {content:'';position:absolute;top:0;left:18px;right:18px;height:2px;background:linear-gradient(90deg,#9c8ace,#e8e1f8);border-radius:0 0 3px 3px}
.metric-top {font-size:10px;font-weight:500;color:#7f798f}
.metric-card strong {font-size:32px;font-weight:650;letter-spacing:-1.3px;margin:10px 0 3px;color:#34304d;line-height:1.2;font-variant-numeric:tabular-nums}
.metric-card small {font-size:9px;color:#9993a7}
.metric-icon {width:30px;height:30px;border-radius:9px;background:#eeeafa!important;color:#7b62af!important;border:1px solid #e6dff5}
.metric-card:nth-child(2) .metric-icon {background:#eef0ff!important;color:#6372bf!important;border-color:#e1e5fb}
.metric-card:nth-child(3) .metric-icon {background:#eaf5f0!important;color:#448870!important;border-color:#d9eee3}
.metric-card:nth-child(4) .metric-icon {background:#fdf3e9!important;color:#b18a5e!important;border-color:#f1e5d7}
.metric-card:first-child {background:linear-gradient(135deg,#4e408f,#2e285c);border-color:#4b3e88;box-shadow:0 7px 22px -10px #44377b60}
.metric-card:first-child::before {background:linear-gradient(90deg,#d2bdfa,#ffffff15)}
.metric-card:first-child .metric-top {color:#ddd5f3}
.metric-card:first-child strong {color:#fff}
.metric-card:first-child small {color:#c2b8df}
.metric-card:first-child .metric-icon {background:#ffffff16!important;color:#e6d8ff!important;border-color:#ffffff20}
.dashboard-grid {gap:18px;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr)}
.attention-row {padding:18px 0;margin:0 20px;font-size:11px;border-bottom-color:#eeecf4}
.attention-row small,.quick-link small {font-size:10px;color:#9891a5;margin-top:4px}
.attention-row strong {font-size:22px;font-weight:600;color:#494059;font-variant-numeric:tabular-nums}
.attention-icon {width:34px;height:34px;border-radius:10px}
.attention-note {background:#faf9fd!important;color:#92869e;padding:13px 20px;line-height:1.6}
.quick-link {padding:17px 20px;font-size:11px;transition:background .18s;border-color:#eeecf4}
.quick-link:hover {background:#f8f6fd}
.quick-icon {width:34px;height:34px;border-radius:10px;background:#f2effa!important;color:#8069ab!important;border-color:#e7e0f2}
.activity-list {padding:4px 20px}
.activity-row {gap:12px;padding:12px 0;border-color:#efedf5}
.activity-row strong {font-weight:600;font-size:11px}
.activity-dot {width:7px;height:7px;background:#ac93cc!important;box-shadow:0 0 0 4px #f3eef9;flex-shrink:0}
.activity-row time {font-variant-numeric:tabular-nums;color:#9992a6}

/* Projects and employees keep their approved gallery layouts. */
.alternate-view {border-color:#e5e1ef;background:transparent;border-radius:14px}
.alternate-view:has(.project-gallery-card) {background:transparent;border:0;overflow:visible}
.view-gallery {gap:16px;padding:8px 0 20px}
.view-gallery .project-gallery-card {border:1px solid #e4e1ee;border-radius:14px;background:linear-gradient(140deg,#fff,#fdfbff);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
.view-gallery .project-gallery-card:hover {border-color:#c5b9df;box-shadow:0 10px 28px -13px #48316a35}
.project-card-link {min-height:180px;padding:22px;border-radius:14px;position:relative;isolation:isolate;overflow:hidden}
.project-card-link::before {content:'';position:absolute;top:0;left:22px;right:22px;height:2px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#a795d1,#eee8f9);transition:height .18s;z-index:-1}
.project-card-link:hover::before {height:4px}
.project-card-link strong {font-size:14px;font-weight:650;color:#423554;letter-spacing:-.25px;line-height:1.55}
.project-card-link .view-meta {padding-top:16px;border-top:1px solid #f0eaf5;gap:10px}
.project-card-link .view-meta small {color:#988ca6;font-size:10px}
.project-card-client {display:flex;align-items:center;gap:7px;margin-top:12px;color:#897695;font-size:11px;line-height:1.5}
.project-card-client .ui-icon {width:15px;height:15px;flex-shrink:0;color:#a18bb3}
.project-card-client span {overflow-wrap:anywhere;min-width:0}
.project-gallery-card .project-status[data-status="Draft"] {background:#f0f1f5;border-color:#dfe2e9;color:#737887}
.project-gallery-card .project-status[data-status="Planned"] {background:#fff7e5;border-color:#f1dfb4;color:#9d741f}
.project-gallery-card .project-status[data-status="Active"] {background:#eaf1ff;border-color:#d0def9;color:#426ab0}
.project-gallery-card .project-status[data-status="On Hold"] {background:#fff0e5;border-color:#f3d6c0;color:#aa6a35}
.project-gallery-card .project-status[data-status="Completed"] {background:#e9f7ef;border-color:#c9e8d7;color:#34825c}
.project-gallery-card .project-status[data-status="Cancelled"] {background:#fcecf0;border-color:#efcfd8;color:#ac516b}
.project-gallery-card .project-status[data-status="Archived"] {background:#efedf4;border-color:#ded8e8;color:#82758e}
.gallery-actions {border-color:#e3dcef;border-radius:8px;box-shadow:0 2px 6px #39235308}
.view-gallery:has(.employee-gallery-card) {gap:20px}
.view-gallery .employee-gallery-card {border-radius:20px;box-shadow:0 8px 25px -12px #35234260;border-color:#fff;height:250px;max-height:250px}
.view-gallery .employee-gallery-card:hover {box-shadow:0 12px 30px -12px #35234280}
.employee-gallery-card::before {background:linear-gradient(180deg,#30213d00 5%,#30213d45 35%,#241b35eb 85%,#241b35 100%)}
.employee-gallery-card .employee-card-head .badge {background:#ffffff20;border-color:#ffffff35;color:white;border-radius:6px}
.employee-gallery-card .employee-card-details>div {border-color:#ffffff20}

/* Task phases, inline cells and schedule. */
.project-navigation {border-bottom-color:#e4e0ed;padding-bottom:12px}
.project-view-tabs {gap:4px;background:#ebe8f3;padding:4px;border-radius:10px}
.project-view-tabs button {padding:7px 13px;border:0;border-radius:7px;font-size:11px;color:#8a7e98}
.project-view-tabs button:hover {background:#f4f1fa}
.project-view-tabs button[aria-pressed=true] {background:white;color:#66518f;box-shadow:0 2px 6px #39265d10}
.phase-list {gap:14px}
.phase-section {border-color:#e4e0ec;border-radius:13px;box-shadow:var(--shadow)}
.phase-summary {padding:17px 20px;background:linear-gradient(130deg,#fff,#fcfaff);gap:12px}
.phase-summary::before {color:#9e8bb6}
.phase-identity {gap:4px}
.phase-identity strong {font-size:13px;color:#5e477b;letter-spacing:-.2px}
.phase-identity small {font-size:10px;color:#a292af}
.phase-count {padding:3px 9px;background:#f0eaf7;border:1px solid #e6ddf0;color:#917ca9;font-size:10px}
.grid-v2 .phase-task-table th {background:#faf8fd;color:#9c8ca9;border-bottom-color:#ece5f3;font-size:11px}
.grid-v2 .phase-task-table td {border-bottom-color:#f1eaf6;font-size:11px;color:#806b93}
.grid-v2 .phase-task-table tbody tr:hover td {background:#fcf9ff}
.grid-v2 .grid-name-text {color:#6c507f;font-size:12px}
.grid-v2 .grid-editable:hover {background:#f4edf9;box-shadow:inset 0 0 0 1px #e4d6ef}
.grid-input {border-color:#c6b3dd;border-radius:7px!important;background:#fff;box-shadow:0 0 0 2px #a58bc312}
.grid-column-title,.grid-button {color:#a38cb5;font-size:11px}
.grid-column-title:hover,.grid-button:hover {color:#74538f}
.phase-task-table .phase-task-add {color:#ad99bc;font-size:12px;padding:8px 20px}
.phase-task-table .phase-task-add:hover {color:#80569e}
.grid-delete-bar {border-color:#e8dfee;border-radius:12px;box-shadow:0 8px 32px #33224420}
.schedule-shell {border-radius:13px}
.schedule-tools {padding:10px 14px;background:#fdfbff;border-color:#ece5f3}
.schedule-bar {background:linear-gradient(90deg,#c6b9e7,#ddd2f0);border-radius:6px;box-shadow:0 2px 5px #5e437f14}
.schedule-phase-bar {background:linear-gradient(90deg,#a48cc6,#d5c7e6)}
.schedule-head,.schedule-corner {background:#fcfaff;color:#9b8aab}
.schedule-name {color:#8d789f;border-bottom-color:#f2ecf7}
.schedule-due {color:#b09abb}
.inline-phase-create {border-color:#e6ddf0;border-radius:13px;box-shadow:var(--shadow)}

/* Forms and popovers. */
dialog {border-color:#e3ddee;border-radius:16px;box-shadow:0 30px 100px #241a4b30,0 3px 12px #241a4b10;max-height:calc(100dvh - 32px);overflow:auto}
dialog::backdrop {background:#231b3e55;backdrop-filter:blur(5px)}
.dialog-head {padding:20px 24px;background:linear-gradient(130deg,#fff,#faf7ff);border-color:#ece6f4}
.dialog-head h2 {font-size:16px;color:#59436f}
.form-grid {padding:22px 24px;gap:18px}
.form-actions {background:#faf8fd;border-top:1px solid #eee7f5;padding:15px 24px}
.row-action-menu,.page-options-menu {padding:6px;border-color:#e4dcef;border-radius:12px;box-shadow:0 12px 36px #3320441a,0 2px 5px #33204408;background:#fff}
.row-action-menu button,.page-options-menu button {padding:10px 12px;border-radius:7px;font-size:11px;color:#90769f}
.row-action-menu button:hover,.page-options-menu button:hover {background:#f5effa;color:#694783}
.settings-grid {gap:18px}
.quick-client-editor {grid-column:1/-1;display:grid;gap:10px;padding:14px;border:1px solid #e7dff1;border-radius:10px;background:#faf7fe}
.quick-client-actions {display:flex;gap:7px}
.quick-client-error {color:#b74965;font-size:11px}
.settings-grid .form-grid {padding:25px}
.settings-grid .form-actions {padding:16px 25px}
.settings-grid label {font-size:11px;color:#8f779e;gap:8px}
.settings-grid input {padding:11px 12px;font-size:12px}
.settings-grid .form-grid p {font-size:11px;color:#aa96b7;line-height:1.7}

/* A polished sign-in surface using the existing local logo. */
body.auth-page {background:radial-gradient(ellipse at 20% 10%,#e6dff7,transparent 50%),radial-gradient(ellipse at 90% 80%,#e2e5f9,transparent 45%),#f6f4fb!important;padding:28px;min-height:100dvh}
.auth-card {padding:38px;width:min(430px,100%);border:1px solid #ffffff;border-radius:24px;background:#ffffffee;box-shadow:0 24px 80px -24px #48376c35,0 2px 8px #48376c05;max-width:100%}
.auth-brand {gap:12px;margin-bottom:28px}
.auth-brand img {width:46px;height:46px}
.auth-brand strong {font-size:26px;letter-spacing:-1px;color:#4d366b!important}
.auth-card .eyebrow {color:#a38bb9;font-size:9px;letter-spacing:2px;margin-bottom:10px}
.auth-card h1 {font-size:30px;letter-spacing:-1.2px;color:#513e65;margin-bottom:10px}
.auth-card>.muted {font-size:12px;color:#a18aad;line-height:1.7}
.auth-card form {gap:18px;margin-top:28px}
.auth-card label {font-size:11px;color:#987ea9;gap:8px}
.auth-card input {padding:12px 13px;font-size:12px;background:#fdfbff;border-color:#e9dff2;border-radius:10px}
.auth-card .button {height:43px;border-radius:10px;margin-top:5px;background:linear-gradient(130deg,#8062aa,#5e4787);border-color:#785aa1;color:white}
.auth-foot {font-size:9px;letter-spacing:1.6px;color:#a890b5;border-color:#eee5f5;margin-top:28px;padding-top:20px}
.auth-foot span {color:#b7a3c0;font-size:10px;letter-spacing:.1px;margin-top:6px}

/* Secondary text stays readable against the soft surfaces. */
.metric-card small {color:#777185}
.phase-identity small,.phase-count {color:#7e6b90}
.grid-v2 .phase-task-table th {color:#806d92}
.grid-column-title,.grid-button {color:#826a95}
.phase-task-table .phase-task-add {color:#826c93}
.schedule-head,.schedule-corner,.schedule-due {color:#85728f}
.row-action-menu button,.page-options-menu button {color:#715981}
.settings-grid label,.auth-card label {color:#725b82}
.settings-grid .form-grid p,.auth-card>.muted {color:#85718f}
.auth-card .eyebrow,.auth-foot {color:#8c739e}
.auth-foot span {color:#8c7a97}

@media(max-width:1100px) {
  .dashboard-grid {grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr)}
  .metric-card {padding:17px 13px}
}
@media(max-width:900px) {
  .dashboard-grid {grid-template-columns:minmax(0,1fr)}
  .metric-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px) {
  .topbar.unified-page-header {padding:16px 12px;gap:12px}
  .page-header-title h1 {font-size:19px}
  .page-header-controls {flex-wrap:wrap}
  .page-header-controls [data-record-toolbar] {flex-wrap:wrap;max-width:100%}
  .card-head {padding:17px 16px}
  .activity-row {flex-wrap:wrap}
  .activity-row time {font-size:9px}
}
@media(max-width:480px) {
  .metric-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .metric-card:last-child {grid-column:1/-1}
  .metric-card {padding:17px 15px}
  .unified-page-header .breadcrumb {padding:7px 9px;gap:6px;font-size:9px}
  .auth-card {padding:28px 24px;border-radius:20px}
  .form-grid {padding:20px;grid-template-columns:1fr}
  .form-actions {padding:14px 20px}
  .card-head {gap:8px;flex-wrap:wrap}
  .schedule-tools {flex-wrap:wrap}
}
/* Smooth interaction feedback without page entrance animations. */
button,a,input,select,textarea,.grid-editable,.task-editable,
.page-options-menu button,.row-action-menu button {
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease;
}
.employee-gallery-card {transition:box-shadow .25s ease,border-color .25s ease}
.phase-task-table tbody td {transition:background-color .18s ease,box-shadow .18s ease}
.task-color-option::after {transition:opacity .18s ease}
.sidebar .brand img {transition:transform .35s cubic-bezier(.22,1,.36,1)!important}
.sidebar .brand:focus-visible img {transform:rotate(-7deg) scale(1.05)}
*,*::before,*::after {
  animation:none!important;
  scroll-behavior:auto!important;
}
@media(prefers-reduced-motion:reduce) {
  .sidebar .brand img {transition:none!important}
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}