/* ============================================================
   SAHAJ CONNECT — DESIGN SYSTEM COMPONENTS (DS-2)
   Shared, opt-in .ds-* component classes built on tokens.css + foundation.css.
   Load order: tokens.css -> foundation.css -> components.css -> legacy env CSS.
   Namespaced .ds-* so legacy .btn/.badge/.card/.panel/.table/.alert are
   untouched. Nothing here affects a screen until it adopts .ds-* markup.
   PRESENTATION ONLY.
   ============================================================ */

/* ---------- Buttons ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);
  min-height:var(--ds-control-h);padding:0 var(--ds-space-4);border:var(--ds-border-w) solid transparent;
  border-radius:var(--ds-radius-md);font:inherit;font-size:var(--ds-fs-base);font-weight:var(--ds-fw-semibold);
  line-height:1;cursor:pointer;text-decoration:none;background:var(--ds-surface);color:var(--ds-text);
  transition:background var(--ds-motion-fast) var(--ds-ease),border-color var(--ds-motion-fast) var(--ds-ease);white-space:nowrap;}
.ds-btn:hover{background:var(--ds-surface-hover);}
.ds-btn--sm{min-height:var(--ds-control-h-sm);padding:0 var(--ds-space-3);font-size:var(--ds-fs-sm);}
.ds-btn--lg{min-height:48px;padding:0 var(--ds-space-5);font-size:var(--ds-fs-md);}
.ds-btn--block{display:flex;width:100%;}
.ds-btn--primary{background:var(--ds-primary);border-color:var(--ds-primary);color:var(--ds-primary-contrast);}
.ds-btn--primary:hover{background:var(--ds-primary-hover);border-color:var(--ds-primary-hover);}
.ds-btn--secondary{background:var(--ds-primary-soft);border-color:transparent;color:var(--ds-primary-active);}
.ds-btn--secondary:hover{background:var(--ds-surface-selected);}
.ds-btn--neutral{background:var(--ds-surface);border-color:var(--ds-border-strong);color:var(--ds-text);}
.ds-btn--success{background:var(--ds-success);border-color:var(--ds-success);color:#fff;}
.ds-btn--danger{background:var(--ds-danger);border-color:var(--ds-danger);color:#fff;}
.ds-btn--ghost{background:transparent;border-color:transparent;color:var(--ds-text);}
.ds-btn--ghost:hover{background:var(--ds-surface-hover);}
.ds-btn--link{background:transparent;border:0;min-height:auto;padding:0;color:var(--ds-link);text-decoration:underline;font-weight:var(--ds-fw-medium);}
.ds-btn--icon{padding:0;width:var(--ds-control-h);height:var(--ds-control-h);}
.ds-btn[disabled],.ds-btn.is-disabled{background:var(--ds-disabled-bg);border-color:var(--ds-disabled-border);color:var(--ds-disabled-text);cursor:not-allowed;pointer-events:none;}
.ds-btn.is-loading{position:relative;color:transparent;pointer-events:none;}
.ds-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;color:var(--ds-primary-contrast);animation:ds-spin .6s linear infinite;}
@keyframes ds-spin{to{transform:rotate(360deg);}}

/* ---------- Forms ---------- */
.ds-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--ds-space-4);}
.ds-label{font-size:var(--ds-fs-sm);font-weight:var(--ds-fw-semibold);color:var(--ds-text);}
.ds-label .ds-req{color:var(--ds-danger);margin-left:2px;}
.ds-input,.ds-select,.ds-textarea{width:100%;min-height:var(--ds-control-h);padding:8px 10px;font:inherit;font-size:var(--ds-fs-base);
  color:var(--ds-text);background:var(--ds-surface);border:var(--ds-border-w) solid var(--ds-border-strong);border-radius:var(--ds-radius-sm);box-sizing:border-box;}
.ds-textarea{min-height:80px;resize:vertical;}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-text-subtle);}
.ds-input:disabled,.ds-select:disabled,.ds-textarea:disabled,.ds-input[readonly]{background:var(--ds-disabled-bg);color:var(--ds-text-muted);}
.ds-help{font-size:var(--ds-fs-xs);color:var(--ds-text-muted);}
.ds-error{font-size:var(--ds-fs-xs);color:var(--ds-danger);}
.ds-field.has-error .ds-input,.ds-field.has-error .ds-select,.ds-field.has-error .ds-textarea{border-color:var(--ds-danger);}
.ds-check{display:inline-flex;align-items:center;gap:var(--ds-space-2);font-size:var(--ds-fs-base);}
.ds-form-section{padding:var(--ds-space-4);border:var(--ds-border-w) solid var(--ds-border);border-radius:var(--ds-radius-md);background:var(--ds-surface);margin-bottom:var(--ds-space-4);}
.ds-form-actions{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center;}

/* ---------- Search + filters ---------- */
.ds-search{display:flex;align-items:center;gap:var(--ds-space-2);min-height:var(--ds-control-h);padding:0 10px;background:var(--ds-surface);border:var(--ds-border-w) solid var(--ds-border-strong);border-radius:var(--ds-radius-md);}
.ds-search input{border:0;outline:0;flex:1;font:inherit;font-size:var(--ds-fs-base);background:transparent;}
.ds-filterbar{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center;}
.ds-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--ds-radius-pill);background:var(--ds-primary-soft);color:var(--ds-primary-active);font-size:var(--ds-fs-sm);}
.ds-chip button{border:0;background:transparent;cursor:pointer;color:inherit;display:inline-flex;}

/* ---------- Cards ---------- */
.ds-card{background:var(--ds-surface);border:var(--ds-border-w) solid var(--ds-border);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-sm);padding:var(--ds-space-4);box-sizing:border-box;}
.ds-card--compact{padding:var(--ds-space-3);}
.ds-card--clickable{cursor:pointer;transition:box-shadow var(--ds-motion-fast) var(--ds-ease),border-color var(--ds-motion-fast) var(--ds-ease);}
.ds-card--clickable:hover{box-shadow:var(--ds-shadow-md);border-color:var(--ds-border-strong);}
.ds-kpi{display:flex;flex-direction:column;gap:2px;}
.ds-kpi__value{font-size:var(--ds-fs-2xl);font-weight:var(--ds-fw-bold);line-height:1.1;color:var(--ds-text);}
.ds-kpi__label{font-size:var(--ds-fs-sm);color:var(--ds-text-muted);}
.ds-kpi__trend{font-size:var(--ds-fs-xs);font-weight:var(--ds-fw-semibold);}
.ds-kpi__trend--up{color:var(--ds-success);}
.ds-kpi__trend--down{color:var(--ds-danger);}
.ds-kpi-grid{display:grid;gap:var(--ds-space-3);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}

/* ---------- Badges / status ---------- */
.ds-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--ds-radius-pill);font-size:var(--ds-fs-xs);font-weight:var(--ds-fw-semibold);line-height:1.4;background:var(--ds-neutral-soft);color:var(--ds-neutral-700);}
.ds-badge__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;}
.ds-badge--neutral{background:var(--ds-neutral-soft);color:var(--ds-neutral-700);}
.ds-badge--info{background:var(--ds-info-soft);color:var(--ds-info);}
.ds-badge--success{background:var(--ds-success-soft);color:var(--ds-success);}
.ds-badge--warning{background:var(--ds-warning-soft);color:var(--ds-warning);}
.ds-badge--danger{background:var(--ds-danger-soft);color:var(--ds-danger);}

/* ---------- Alerts / notices ---------- */
.ds-alert{display:flex;gap:var(--ds-space-3);padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);border:var(--ds-border-w) solid var(--ds-border);background:var(--ds-surface);align-items:flex-start;}
.ds-alert__icon{flex:none;margin-top:1px;}
.ds-alert__title{font-weight:var(--ds-fw-semibold);margin:0 0 2px;}
.ds-alert__body{font-size:var(--ds-fs-sm);color:var(--ds-text-muted);}
.ds-alert--info{background:var(--ds-info-soft);border-color:transparent;color:var(--ds-info);}
.ds-alert--success{background:var(--ds-success-soft);border-color:transparent;color:var(--ds-success);}
.ds-alert--warning{background:var(--ds-warning-soft);border-color:transparent;color:var(--ds-warning);}
.ds-alert--danger{background:var(--ds-danger-soft);border-color:transparent;color:var(--ds-danger);}
.ds-alert__close{margin-left:auto;border:0;background:transparent;cursor:pointer;color:inherit;}

/* ---------- Table ---------- */
.ds-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:var(--ds-border-w) solid var(--ds-border);border-radius:var(--ds-radius-md);}
.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-fs-base);}
.ds-table th,.ds-table td{padding:10px 12px;text-align:left;border-bottom:var(--ds-border-w) solid var(--ds-border);vertical-align:middle;}
.ds-table thead th{background:var(--ds-surface-muted);font-size:var(--ds-fs-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--ds-text-muted);font-weight:var(--ds-fw-semibold);}
.ds-table tbody tr:hover{background:var(--ds-surface-hover);}
.ds-table .ds-num{text-align:right;font-variant-numeric:tabular-nums;}
.ds-table--compact th,.ds-table--compact td{padding:6px 10px;}

/* ---------- Page / section headers ---------- */
.ds-page-header{display:flex;flex-wrap:wrap;gap:var(--ds-space-3);align-items:flex-start;justify-content:space-between;margin-bottom:var(--ds-space-4);}
.ds-page-header__title{font-size:var(--ds-fs-xl);font-weight:var(--ds-fw-bold);margin:0;line-height:var(--ds-lh-tight);}
.ds-page-header__meta{color:var(--ds-text-muted);font-size:var(--ds-fs-sm);margin-top:2px;}
.ds-page-header__actions{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);}
.ds-section-header{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);margin:var(--ds-space-4) 0 var(--ds-space-2);}
.ds-section-header h2,.ds-section-header h3,.ds-section-header h4{margin:0;font-size:var(--ds-fs-md);font-weight:var(--ds-fw-semibold);}

/* ---------- Breadcrumb ---------- */
.ds-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--ds-fs-sm);color:var(--ds-text-muted);}
.ds-breadcrumb a{color:var(--ds-link);text-decoration:none;}
.ds-breadcrumb [aria-current="page"]{color:var(--ds-text);font-weight:var(--ds-fw-medium);}

/* ---------- Tabs ---------- */
.ds-tabs{display:flex;gap:2px;border-bottom:var(--ds-border-w) solid var(--ds-border);overflow-x:auto;}
.ds-tab{padding:10px 14px;text-decoration:none;color:var(--ds-text-muted);border-bottom:2px solid transparent;white-space:nowrap;font-size:var(--ds-fs-base);}
.ds-tab[aria-current="page"],.ds-tab.is-active{color:var(--ds-primary);border-bottom-color:var(--ds-primary);font-weight:var(--ds-fw-semibold);}

/* ---------- Pagination ---------- */
.ds-pagination{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.ds-pagination a,.ds-pagination span{min-width:var(--ds-control-h-sm);height:var(--ds-control-h-sm);padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:var(--ds-border-w) solid var(--ds-border);border-radius:var(--ds-radius-sm);text-decoration:none;color:var(--ds-text);font-size:var(--ds-fs-sm);}
.ds-pagination .is-active{background:var(--ds-primary);border-color:var(--ds-primary);color:#fff;}
.ds-pagination .is-disabled{color:var(--ds-disabled-text);pointer-events:none;}

/* ---------- Dropdown / action menu ---------- */
.ds-dropdown{position:relative;display:inline-block;}
.ds-dropdown__menu{position:absolute;right:0;top:calc(100% + 4px);min-width:180px;background:var(--ds-surface);border:var(--ds-border-w) solid var(--ds-border);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md);padding:4px;z-index:40;display:none;}
.ds-dropdown.is-open .ds-dropdown__menu{display:block;}
.ds-dropdown__item{display:flex;align-items:center;gap:var(--ds-space-2);padding:8px 10px;border-radius:var(--ds-radius-sm);text-decoration:none;color:var(--ds-text);font-size:var(--ds-fs-sm);cursor:pointer;}
.ds-dropdown__item:hover{background:var(--ds-surface-hover);}

/* ---------- Modal / confirmation ---------- */
.ds-modal-overlay{position:fixed;inset:0;background:rgba(20,36,59,.45);display:flex;align-items:center;justify-content:center;padding:var(--ds-space-4);z-index:1000;}
.ds-modal-overlay[hidden]{display:none;}
.ds-modal{background:var(--ds-surface);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-lg);max-width:440px;width:100%;padding:var(--ds-space-5);box-sizing:border-box;}
.ds-modal__title{margin:0 0 var(--ds-space-2);font-size:var(--ds-fs-lg);font-weight:var(--ds-fw-bold);}
.ds-modal__body{color:var(--ds-text-muted);font-size:var(--ds-fs-base);margin-bottom:var(--ds-space-4);}
.ds-modal__actions{display:flex;justify-content:flex-end;gap:var(--ds-space-2);}
.ds-modal--danger .ds-modal__title{color:var(--ds-danger);}

/* ---------- Toast ---------- */
.ds-toasts{position:fixed;top:var(--ds-space-4);right:var(--ds-space-4);display:flex;flex-direction:column;gap:var(--ds-space-2);z-index:1100;max-width:360px;}
.ds-toast{padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md);background:var(--ds-surface);border-left:4px solid var(--ds-primary);font-size:var(--ds-fs-sm);}
.ds-toast--success{border-left-color:var(--ds-success);}
.ds-toast--danger{border-left-color:var(--ds-danger);}

/* ---------- Empty / error / loading ---------- */
.ds-empty,.ds-error-state{text-align:center;padding:var(--ds-space-6) var(--ds-space-4);color:var(--ds-text-muted);}
.ds-empty__icon,.ds-error-state__icon{color:var(--ds-text-subtle);margin-bottom:var(--ds-space-2);}
.ds-empty__title,.ds-error-state__title{color:var(--ds-text);font-weight:var(--ds-fw-semibold);font-size:var(--ds-fs-md);margin:0 0 4px;}
.ds-skeleton{background:linear-gradient(90deg,var(--ds-neutral-100) 25%,var(--ds-neutral-200) 37%,var(--ds-neutral-100) 63%);background-size:400% 100%;border-radius:var(--ds-radius-sm);animation:ds-shimmer 1.4s ease infinite;min-height:1em;}
@keyframes ds-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){.ds-skeleton{animation:none;}}

/* ---------- Domain cards: document / activity / project / compliance / notification ---------- */
.ds-media{display:flex;gap:var(--ds-space-3);align-items:flex-start;}
.ds-media__icon{flex:none;color:var(--ds-primary);}
.ds-media__title{font-weight:var(--ds-fw-semibold);margin:0;}
.ds-media__meta{font-size:var(--ds-fs-xs);color:var(--ds-text-muted);}
.ds-notif{display:flex;gap:var(--ds-space-2);padding:var(--ds-space-3) 0;border-bottom:var(--ds-border-w) solid var(--ds-border);}
.ds-notif.is-unread{background:var(--ds-primary-soft);}
.ds-compliance-item{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);padding:var(--ds-space-2) 0;border-bottom:var(--ds-border-w) solid var(--ds-border);}

/* ---------- Organisation switcher ---------- */
.ds-orgswitch{display:flex;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-2);border-radius:var(--ds-radius-md);}
.ds-orgswitch__avatar{width:32px;height:32px;border-radius:var(--ds-radius-sm);background:var(--ds-primary-soft);color:var(--ds-primary-active);display:flex;align-items:center;justify-content:center;font-weight:var(--ds-fw-bold);flex:none;}
.ds-orgswitch__name{font-weight:var(--ds-fw-semibold);font-size:var(--ds-fs-sm);line-height:1.2;}

/* ---------- Quick action ---------- */
.ds-quick{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:var(--ds-space-3);border:var(--ds-border-w) solid var(--ds-border);border-radius:var(--ds-radius-md);background:var(--ds-surface);text-decoration:none;color:var(--ds-text);transition:border-color var(--ds-motion-fast) var(--ds-ease);}
.ds-quick:hover{border-color:var(--ds-primary);}
.ds-quick__icon{color:var(--ds-primary);}
.ds-quick__label{font-weight:var(--ds-fw-semibold);font-size:var(--ds-fs-sm);}

/* ---------- Timeline ---------- */
.ds-timeline{list-style:none;margin:0;padding:0;}
.ds-timeline__item{position:relative;padding:0 0 var(--ds-space-4) var(--ds-space-5);border-left:2px solid var(--ds-border);}
.ds-timeline__item:last-child{border-left-color:transparent;}
.ds-timeline__dot{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ds-border-strong);}
.ds-timeline__item--done .ds-timeline__dot{background:var(--ds-success);}
.ds-timeline__item--current .ds-timeline__dot{background:var(--ds-primary);box-shadow:0 0 0 3px var(--ds-primary-soft);}
.ds-timeline__item--cancelled .ds-timeline__dot{background:var(--ds-danger);}

/* ---------- Stepper ---------- */
.ds-stepper{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center;}
.ds-step{display:flex;align-items:center;gap:6px;font-size:var(--ds-fs-sm);color:var(--ds-text-muted);}
.ds-step__num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--ds-fs-xs);font-weight:var(--ds-fw-bold);background:var(--ds-neutral-soft);color:var(--ds-text-muted);flex:none;}
.ds-step--done .ds-step__num{background:var(--ds-success);color:#fff;}
.ds-step--current .ds-step__num{background:var(--ds-primary);color:#fff;}
.ds-step--current{color:var(--ds-text);font-weight:var(--ds-fw-semibold);}
.ds-step__sep{width:20px;height:2px;background:var(--ds-border);flex:none;}

/* ---------- Print safety: DS chrome hidden in print ---------- */
@media print{.ds-modal-overlay,.ds-toasts,.ds-dropdown__menu,.ds-btn--icon{display:none !important;}}