/* ═══ Kadai Design System Components ═══ */

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius); font-family: var(--font); font-weight: var(--weight-medium); cursor: pointer; transition: all var(--ease); border: 1px solid transparent; font-size: var(--text-sm); padding: var(--space-3) var(--space-4); line-height: 1; }
.btn:hover { box-shadow: none; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.btn-primary { background: var(--indigo); color: var(--white); border-color: var(--indigo); }
.btn-primary:hover { background: var(--indigo-dark); border-color: var(--indigo-dark); }
.btn-outline { background: var(--white); color: var(--gray-900); border-color: var(--gray-200); }
.btn-outline:hover { border-color: var(--gray-400); }
.btn-ghost { background: transparent; color: var(--gray-600); border-color: transparent; }
.btn-ghost:hover { background: rgba(0,0,0,.04); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(220,38,38,.2); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
.btn-lg { font-size: var(--text-base); padding: var(--space-4) var(--space-6); }

/* Input */
.input { padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid var(--gray-200); font-size: var(--text-sm); font-family: var(--font); outline: none; background: var(--white); transition: all var(--ease); }
.input:hover { border-color: var(--gray-400); }
.input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.input::placeholder { color: var(--gray-400); }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); border: 1px solid rgba(0,0,0,.08); }
.badge i[class*="ph"] { font-size: var(--text-sm); }

/* Card */
.card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: var(--space-4); transition: all var(--ease); }
.card:hover { box-shadow: var(--shadow-md); border-color: var(--gray-200); transform: translateY(-1px); }
.card .card-actions { opacity: 0; transition: opacity var(--ease); }
.card:hover .card-actions { opacity: 1; }
.card-title { font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.card-desc { font-size: var(--text-sm); color: var(--gray-600); line-height: 1.6; }
.card-footer { margin-top: var(--space-3); display: flex; gap: var(--space-2); }
.card.selected { border-color: var(--indigo); background: var(--indigo-50); box-shadow: 0 0 0 3px var(--indigo-50); }

/* Header bar */
.header { height: 48px; flex-shrink: 0; background: var(--white); border-bottom: 1px solid var(--gray-100); padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); position: relative; z-index: 1100; }

/* Tab bar */
.tab-bar { display: flex; background: var(--gray-50); border-radius: var(--radius); border: 1px solid var(--gray-100); overflow: hidden; flex-shrink: 0; }
.tab-bar button { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-medium); border: none; cursor: pointer; white-space: nowrap; line-height: 1.4; font-family: var(--font); display: inline-flex; align-items: center; gap: var(--space-1); background: transparent; color: var(--gray-400); transition: all var(--ease); }
.tab-bar button[aria-selected="true"] { color: var(--indigo); background: var(--indigo-50); }

/* Toolbar */
.toolbar { height: 36px; flex-shrink: 0; background: var(--white); border-bottom: 1px solid var(--gray-50); padding: 0 var(--space-4); display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-xs); }
.toolbar-btn { padding: 3px 10px; border-radius: var(--radius); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; flex-shrink: 0; font-size: var(--text-xs); font-family: var(--font); display: inline-flex; align-items: center; gap: var(--space-1); line-height: 1; transition: all var(--ease); }
.toolbar-sep { color: var(--gray-400); flex-shrink: 0; }

/* Icon button (square) */
.icon-btn { width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--gray-100); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); color: var(--gray-900); transition: all var(--ease); }
.icon-btn:hover { border-color: var(--gray-200); }
.icon-btn:disabled { background: var(--gray-50); cursor: not-allowed; color: var(--gray-400); opacity: .5; }
.icon-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Sector filter badge */
.sector-badge { display: flex; align-items: center; gap: 3px; padding: var(--space-1) var(--space-2); border-radius: var(--radius); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: var(--font); line-height: 1; transition: all var(--ease); }

/* Search input */
.search-wrap { position: relative; width: 180px; }
.search-wrap input { width: 100%; padding: 6px 10px 6px 28px; border-radius: var(--radius); border: 1px solid var(--gray-100); background: var(--white); color: var(--gray-900); font-size: var(--text-xs); font-family: var(--font); outline: none; transition: all var(--ease); }
.search-wrap input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: var(--text-sm); color: var(--gray-400); }
.search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: var(--space-1); max-height: 200px; overflow-y: auto; }
.search-dropdown div { padding: 7px 10px; cursor: pointer; font-size: var(--text-xs); border-radius: var(--radius); }
.search-dropdown div:hover { background: var(--indigo-50); }

/* Save status */
.save-status { font-size: var(--text-xs); font-weight: var(--weight-medium); margin-left: var(--space-2); white-space: nowrap; }

/* ═══ Tab Content Layout ═══ */
/* Scrollable tab pane — fills remaining height, consistent margins across all tabs */
.tab-pane { flex: 1; overflow: auto; padding: var(--space-6) var(--space-12); }

/* Centered content container — single max-width for all tabs */
.tab-content { max-width: 1200px; margin: 0 auto; }

/* Tab page header — consistent title + count + actions row */
.tab-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.tab-title { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0; line-height: 1; display: inline-flex; align-items: center; gap: var(--space-2); }
.tab-count { font-size: var(--text-xs); color: var(--gray-400); font-weight: var(--weight-medium); }
.tab-subtitle { font-size: var(--text-xs); color: var(--gray-400); margin-bottom: var(--space-3); }

/* Empty state */
.empty-state { padding: var(--space-12) var(--space-6); text-align: center; color: var(--gray-400); }
.empty-state-icon { font-size: 48px; margin-bottom: var(--space-3); }
.empty-state-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--gray-900); margin-bottom: var(--space-2); }
.empty-state-desc { font-size: var(--text-xs); line-height: 1.7; }

/* Grid layouts */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }

/* Chip / toggle selector — used for sector, status, type, lead pickers */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 2px solid var(--gray-100); background: var(--white); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-400); cursor: pointer; font-family: var(--font); transition: all var(--ease); line-height: 1; }
.chip:hover { border-color: var(--gray-200); }
.chip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.chip.active { border-color: var(--indigo); background: var(--indigo-50); color: var(--indigo); }

/* Dashed add button */
.btn-dashed { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); width: 100%; padding: var(--space-1) var(--space-3); border-radius: var(--radius); border: 1px dashed rgba(99,102,241,.25); background: rgba(99,102,241,.08); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--indigo); cursor: pointer; font-family: var(--font); transition: all var(--ease); text-align: center; line-height: 1; }
.btn-dashed:hover { background: rgba(99,102,241,.12); border-color: var(--indigo); }
.btn-dashed:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Close button (inline context) */
.btn-close { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius); border: 1px solid var(--gray-100); background: none; font-size: var(--text-sm); color: var(--gray-400); cursor: pointer; font-family: var(--font); transition: all var(--ease); line-height: 1; }
.btn-close:hover { border-color: var(--gray-200); color: var(--gray-600); }
.btn-close:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Menu item (dropdown) */
.menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border: none; background: transparent; cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-normal); border-radius: var(--radius); font-family: var(--font); color: var(--gray-900); text-align: left; transition: background var(--ease); line-height: 1; }
.menu-item:hover { background: var(--gray-50); }
.menu-item i[class*="ph"] { font-size: var(--text-base); color: var(--indigo); }

/* Zoom control group */
.zoom-btn { width: 22px; height: 22px; border-radius: var(--radius); border: 1px solid var(--gray-100); background: var(--white); cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-400); display: flex; align-items: center; justify-content: center; transition: all var(--ease); }
.zoom-btn:hover { border-color: var(--gray-200); color: var(--gray-600); }

/* Modal overlay + content */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-content { background: var(--white); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 32px; animation: dialogIn .2s ease-out; }

/* Popover (anchored dropdown) */
.popover { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: var(--space-1); }

/* Textarea */
.textarea { width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid var(--gray-200); font-size: var(--text-sm); font-family: var(--font); outline: none; background: var(--white); resize: vertical; line-height: 1.6; transition: all var(--ease); box-sizing: border-box; }
.textarea:hover { border-color: var(--gray-400); }
.textarea:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.textarea::placeholder { color: var(--gray-400); }

/* Form label */
.form-label { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-400); margin-bottom: var(--space-1); }
.form-label .required { color: var(--danger); }