/**
 * KIS Proto — Common Styles
 * Pixel-perfect from Figma JSON
 * Font: Roboto 400/500 from Google Fonts
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Colors */
  --primary: #315084;
  --primary-dark: #002f66;
  --active-nav: #001b3f;
  --text: #212121;
  --text-dark: #1a1b1f;
  --text-secondary: #5e5e62;
  --text-light: #9e9e9e;
  --bg-page: #ffffff;
  --bg-card: #fdfbff;
  --border: #74777f;
  --border-light: #c4c6d0;
  --accent: #1565c0;
  --error: #ba1a1a;
  --success: #006d40;
  --warning: #7d5700;

  /* Shadows (universal — use everywhere) */
  --shadow-card: 0px 1px 3px rgba(0,0,0,0.12), 0px 2px 1px rgba(0,0,0,0.08), 0px 1px 1px rgba(0,0,0,0.08);
  --shadow-popup: 0px 1px 3px rgba(0,0,0,0.12), 0px 2px 1px rgba(0,0,0,0.08), 0px 1px 1px rgba(0,0,0,0.08);

  /* Layout */
  --page-width: 1920px;
  --content-margin: 168px;
  --content-width: 1586px;
  --header-height: 82px;
  --nav-height: 36px;

  /* Typography */
  --font-family: 'Roboto', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background: var(--bg-page);
  min-width: var(--page-width);
  max-width: var(--page-width);
  margin: 0 auto;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER: h=82px, bg=#ffffff, padding: 0 168px
   ═══════════════════════════════════════════════════════════════════════════ */
.header {
  width: var(--page-width);
  height: var(--header-height);
  background: var(--bg-page);
  display: flex;
  align-items: center;
  padding: 0 var(--content-margin);
}

/* Logo: x=168, y=15, w=297, h=50 */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  flex-shrink: 0;
}
.logo img {
  width: 60px;
  height: 50px;
  display: block;
}
.logo-text {
  font-size: 20px;
  font-weight: 400;
  color: #000000;
  line-height: 33px;
  white-space: nowrap;
}

/* Header right side */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 36px;
}

.btn-user {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-user:hover { background: rgba(49,80,132,0.06); }

.btn-profile {
  display: flex;
  align-items: center;
  width: 212px;
  height: 36px;
  padding: 6px 8px 6px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  gap: 16px;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.btn-profile:hover { background: #f5f3f8; }
.btn-profile span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.btn-profile svg { flex-shrink: 0; width: 24px; height: 24px; }

.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
}
.btn-logout:hover { background: rgba(49,80,132,0.06); }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION: x=168, w=1586, h=36, bg=#315084, radius=4
   ═══════════════════════════════════════════════════════════════════════════ */
.nav {
  width: var(--content-width);
  height: var(--nav-height);
  background: var(--primary);
  border-radius: 4px;
  margin-left: var(--content-margin);
  display: flex;
  align-items: stretch;
  overflow: hidden;   /* ensures right border-radius isn't clipped by children */
}

.nav-tabs {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 8px 24px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
}
.nav-item:hover { background: rgba(255,255,255,0.12); }
.nav-item.active { 
  background: var(--active-nav); 
  border-radius: 4px; 
}

.nav-spacer { flex: 1; }

.nav-search {
  display: flex;
  align-items: center;
  width: 240px;
  height: 36px;
  background: var(--primary);
  padding: 6px 16px;
  flex-shrink: 0;
}
.nav-search-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 8px;
  justify-content: space-between;
}
.nav-search-inner input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  width: 100%;
}
.nav-search-inner input::placeholder { color: var(--text-secondary); }
.nav-search-inner svg { width: 24px; height: 24px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE WRAP
   ═══════════════════════════════════════════════════════════════════════════ */
.page-wrap {
  width: var(--page-width);
  padding: 22px var(--content-margin) 32px; /* top=22 (Figma), bottom=32 (gap to footer) */
}

.page-title {
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  line-height: 28.1px;
  margin-bottom: 14px; /* Figma: title bottom=167, card top=181 → gap=14px */
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════════════════════════ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-secondary);
}
.breadcrumbs a {
  color: var(--accent);
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs span.separator {
  color: var(--text-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBMENU (Tabs inside page)
   ═══════════════════════════════════════════════════════════════════════════ */
.submenu {
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 20px;
}
.submenu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  text-decoration: none;
}
.submenu-item:hover {
  color: var(--primary);
}
.submenu-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  width: var(--content-width);
  background: var(--bg-card);   /* #fdfbff */
  padding: 16px;
  box-shadow: var(--shadow-card);
  border-radius: 4px;
  margin-bottom: 0;
}

.card-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 28px;
  margin-bottom: 20px;
}

.card-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 24px;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM LAYOUTS
   ═══════════════════════════════════════════════════════════════════════════ */
.form-cols {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.col-left, .col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.form-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */
.field {
  display: flex;
  flex-direction: column;
}

.field-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 20px;
  height: 20px;
  margin-bottom: 0;
}

.field-input, .field-select, .field-textarea {
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 8px 8px 16px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg-card);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.field-textarea {
  height: auto;
  min-height: 80px;
  resize: vertical;
}

textarea.field-input {
  height: auto;
  min-height: 80px;
  resize: vertical;
  overflow-y: auto;
}

.field-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10L12 15L17 10H7Z' fill='%235E5E62'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 24px 24px;
  cursor: pointer;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color: var(--primary);
  border-width: 2px;
  padding: 7px 7px 7px 15px;
}

.field-input:disabled, .field-select:disabled {
  background: #f0f0f0;
  cursor: not-allowed;
}

.field-input.readonly, .field-select.readonly {
  background: #f5f5f5;
  border-color: var(--border-light);
}

/* Date field with calendar */
.field-date {
  position: relative;
}
.field-date .field-input {
  padding-right: 40px;
}
.field-date .calendar-icon {
  position: absolute;
  right: 8px;
  top: 28px;
  pointer-events: none;
  width: 24px;
  height: 24px;
}

/* Small date field */
.field-date-sm {
  width: 139px;
}
.field-date-sm .field-input {
  width: 139px;
}

/* Field with value (static display) */
.field-value {
  font-size: 14px;
  color: var(--text);
  line-height: 40px;
  padding: 0 16px;
  background: #f5f5f5;
  border-radius: 4px;
  height: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKBOXES
   ═══════════════════════════════════════════════════════════════════════════ */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  cursor: pointer;
}
/* SVG checkboxes — same as Screen 01 (Figma) */
.checkbox-row input[type="checkbox"],
.checkbox-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z' fill='%2374777F'/%3E%3C/svg%3E") no-repeat center;
  background-size: 24px 24px;
}
.checkbox-row input[type="checkbox"]:checked,
.checkbox-item input[type="checkbox"]:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23315084'/%3E%3C/svg%3E") no-repeat center;
  background-size: 24px 24px;
}
.checkbox-row span,
.checkbox-item span {
  font-size: 14px;
  font-weight: 400;
  color: #1a1b1f;
  line-height: 20px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z' fill='%2374777F'/%3E%3C/svg%3E") no-repeat center;
  background-size: 24px 24px;
  border: none;
}

.checkbox-item input[type="checkbox"]:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23315084'/%3E%3C/svg%3E") no-repeat center;
  background-size: 24px 24px;
}

.checkbox-item span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 20px;
  white-space: nowrap;
}

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-row {
  display: flex;
  gap: 10px;
  height: 36px;
  align-items: center;
}

.btn-primary {
  height: 36px;
  padding: 8px 16px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
  height: 36px;
  padding: 8px 16px;
  background: var(--bg-card);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.btn-secondary:hover { background: rgba(49,80,132,0.06); }

.btn-text {
  height: 36px;
  padding: 8px 16px;
  background: transparent;
  color: var(--primary);
  border: none;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.btn-text:hover { background: rgba(49,80,132,0.06); border-radius: 4px; }

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { background: rgba(49,80,132,0.06); }

.btn-danger {
  background: var(--error);
}
.btn-danger:hover { background: #a01515; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th {
  text-align: left;
  padding: 12px 16px;
  background: #f0f1f5;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: middle;
}

.table tr:hover td {
  background: rgba(49,80,132,0.04);
}

.table-link {
  color: var(--accent);
  cursor: pointer;
}
.table-link:hover {
  text-decoration: underline;
}

.table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-success {
  background: #e6f4ea;
  color: var(--success);
}

.badge-warning {
  background: #fef7e0;
  color: var(--warning);
}

.badge-error {
  background: #fce8e6;
  color: var(--error);
}

.badge-info {
  background: #e8f0fe;
  color: var(--accent);
}

.badge-neutral {
  background: #f0f1f5;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.footer {
  width: var(--page-width);
  padding: 0 var(--content-margin);
  height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-top: 0;    /* gap from content handled by page-wrap padding-bottom: 60px */
  margin-bottom: 22px; /* same gap below footer as above page content */
}

.footer-img {
  position: absolute;
  right: 189px;
  top: 1px;
  width: 102px;
  height: 57px;
  object-fit: contain;
}

.footer-links {
  display: flex;
  align-items: center;
}

.footer-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-dark);
  line-height: 20px;
  text-decoration: none;
}
.footer-link:hover { text-decoration: underline; }

.footer-sep {
  color: var(--border-light);
  font-size: 14px;
  font-weight: 500;
  margin: 0 10px;
}

.footer-version {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
  line-height: 16.4px;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS / DIALOGS
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-card);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.24);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
}

.modal-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-dark);
}

.modal-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50%;
}
.modal-close:hover {
  background: rgba(0,0,0,0.08);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO BLOCKS
   ═══════════════════════════════════════════════════════════════════════════ */
.info-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 4px;
}

.info-row {
  display: flex;
  gap: 16px;
}

.info-label {
  font-size: 14px;
  color: var(--text-secondary);
  min-width: 200px;
}

.info-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════════════════ */
.accordion {
  border: 1px solid var(--border-light);
  border-radius: 4px;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f5f5f5;
  cursor: pointer;
  font-weight: 500;
}

.accordion-header:hover {
  background: #eee;
}

.accordion-content {
  padding: 16px;
  display: none;
}

.accordion.open .accordion-content {
  display: block;
}

.accordion.open .accordion-header svg {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR MENU (for document actions)
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-menu {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
  z-index: 100;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.sidebar-menu-item:hover {
  background: rgba(49,80,132,0.06);
}

.sidebar-menu-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }

.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

.text-right { text-align: right; }
.text-center { text-align: center; }

.text-sm { font-size: 12px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 20px; }

.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-light); }
.text-accent { color: var(--accent); }
.text-error { color: var(--error); }
.text-success { color: var(--success); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.hidden { display: none; }
.visible { visibility: visible; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE (optional - for dev preview)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1920px) {
  body {
    overflow-x: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MENETLUS CARD  (Screen 2+)
   ═══════════════════════════════════════════════════════════════════════════ */
.menetlus-card { padding: 0; } /* extends .card; sections handle padding */
.mc-section { padding: 10px 16px; border-bottom: 1px solid #e0e0e0; }
.mc-section:last-child { border-bottom: none; }
.mc-section.links { padding: 14px 16px; }

.mc-row1 { display: flex; align-items: center; justify-content: space-between; }
.mc-row1-left { display: flex; align-items: center; gap: 12px; }
.mc-nr { font-size: 20px; font-weight: 400; color: #212121; }
.mc-badge { font-size: 14px; font-weight: 400; display: flex; align-items: center; gap: 4px; }
.mc-badge.dark { color: #212121; }
.mc-badge.grey { color: #757575; }
.mc-row1-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.mc-link { color: #1565c0; font-size: 14px; font-weight: 400; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.mc-link:hover { font-weight: 500; }

.btn-tegevused { display: flex; align-items: center; height: 36px; padding: 6px 8px 6px 16px; background: #fdfbff; border: 1px solid #74777f; border-radius: 4px; font-family: 'Roboto', sans-serif; font-size: 14px; color: #315084; cursor: pointer; gap: 16px; }

.mc-info-row { display: flex; align-items: baseline; line-height: 20px; }
.mc-label { font-size: 14px; color: #757575; width: 130px; flex-shrink: 0; }
.mc-value { font-size: 14px; color: #212121; }
.mc-value.bold { font-weight: 500; }
.mc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 0; }

.mc-toiming { display: flex; align-items: baseline; }
.mc-toiming-links { display: flex; align-items: center; flex-wrap: wrap; }
.mc-toiming-link { color: #1565c0; font-size: 14px; text-decoration: none; }
.mc-toiming-link:hover { text-decoration: underline; }
.mc-toiming-sep { color: #c4c6d0; margin: 0 16px; font-size: 14px; }

.mc-bottom-links { display: flex; align-items: center; gap: 24px; }
.mc-bottom-link { color: #1565c0; font-size: 14px; font-weight: 500; text-decoration: none; }
.mc-bottom-link:hover { text-decoration: underline; }

.mc-tooltip-wrap { position: relative; display: inline-flex; align-items: center; }
.mc-tooltip { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: #616161; color: #fff; font-size: 14px; padding: 8px 16px; border-radius: 4px; white-space: nowrap; z-index: 10; }
.mc-tooltip-wrap:hover .mc-tooltip { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   TAB CARD  (Figma: Submenu + content as one visual unit)
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-card { padding: 0; margin-top: 30px; } /* .card with no padding */

/* ════════════════════════════════════════════════════════
   TABS — Variant A: full-width, height 48px, text centered
   Two sub-variants:
     .tab-bar           — on shadow card: NO bottom line on inactive
     .tab-bar.tab-line  — standalone (no card shadow): line under all
   ════════════════════════════════════════════════════════ */
.tab-bar {
  display: flex; align-items: stretch; background: #fdfbff;
  /* No border-bottom — used on cards with drop shadow */
}
.tab-bar.tab-line {
  border-bottom: 1px solid #e0e0e0; /* standalone tabs — line under inactive */
}
.tab-item {
  flex: 1;
  display: flex; flex-direction: column;
  height: 48px;
  cursor: pointer; text-decoration: none;
}
.tab-frame {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.tab-text {
  font-family: var(--font-family); font-size: 14px; font-weight: 400;
  color: #49454f; white-space: nowrap; line-height: 20px; text-align: center;
}
.tab-item:not(.active):hover .tab-text { font-weight: 500; color: #1a1b1f; }
.tab-item.active .tab-text { font-weight: 500; color: #315084; }
.tab-ind { width: 100%; height: 3px; background: transparent; flex-shrink: 0; }
.tab-item:not(.active):hover .tab-ind { background: #9e9e9e; }
.tab-item.active .tab-ind { background: #315084; }
.tab-content { padding: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE BOX  (Figma: Saadetised tabel — white box wrapping table + form)
   ═══════════════════════════════════════════════════════════════════════════ */
.table-box { width: 100%; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 4px; overflow: visible; }
/* Keep overflow hidden only for pure data tables (not form containers) */
.table-box.table-data { overflow: hidden; }
.table-head { display: grid; grid-template-columns: 240px 520px 1fr 220px; padding: 12px 16px; border-bottom: 1px solid #e0e0e0; align-items: center; }

.th { font-size: 13px; color: #757575; }
.table-row { display: grid; grid-template-columns: 240px 520px 1fr 220px; padding: 0 16px; border-bottom: 1px solid #e0e0e0; align-items: center; height: 52px; box-sizing: border-box; }
.table-row:last-child { border-bottom: none; }
.table-row::after, .table-row::before { display: none !important; content: none !important; }
#table-body, #kk-tbody, #mg-tbody, #si-tbody, #dok-tbody { border-bottom: 1px solid #e0e0e0; }
.table-empty-row { height: 48px; display: block; border-bottom: none; }
#dok-tbody .table-row { height: auto; min-height: 52px; align-items: start; }
.td { font-size: 13px; color: #212121; }
.td.purple { color: #8e24aa; font-weight: 500; }
.table-row:has(.field-select) .td,
.table-row:has(select) .td {
  display: flex;
  align-items: center;
  min-height: 52px;
}
.table-row:has(.field-select) .td .field-select,
.table-row:has(select) .td .field-select,
.table-row:has(.field-select) .td select,
.table-row:has(select) .td select,
.table-row:has(.field-select) .td .btn-tegevused,
.table-row:has(select) .td .btn-tegevused {
  align-self: center;
}

/* Form inside table-box (Figma Frame 264: VERTICAL gap=16) */
.table-form { display: flex; flex-direction: column; gap: 8px; padding: 16px; align-items: flex-start; }
.table-form .field { margin-bottom: 0; }
.table-form .btn-primary { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENETLEJA CARD  (bottom card on Screen 2)
   ═══════════════════════════════════════════════════════════════════════════ */
.menetleja-card { margin-top: 16px; } /* gap between tab-card and menetleja = 16px */

/* ═══════════════════════════════════════════════════════════════════════════
   ICON FILTERS
   ═══════════════════════════════════════════════════════════════════════════ */
.icon-blue { filter: brightness(0) saturate(100%) invert(21%) sepia(55%) saturate(547%) hue-rotate(186deg) brightness(88%) contrast(97%); }

/* Editable table row — SAME grid as .table-head, NO column-gap */
.table-row--edit {
  grid-template-columns: 240px 520px 1fr 220px;
  background: #f8f9ff; align-items: center;
  padding: 0 16px; column-gap: 0; height: 52px; box-sizing: border-box;
}
/* Document sub-tabs: auto-width (not flex:1) */
.tab-item.doc-tab {
  flex: 0 0 auto;
  min-width: 80px;
  padding: 0 16px;
}

.table-row--edit .td { display: flex; align-items: center; gap: 6px; overflow: visible; padding-right: 8px; }
.table-row--edit .td:last-child { justify-content: space-between; padding-right: 0; }
.tr-input { height: 36px; font-size: 13px; width: 100%; border: 1px solid #74777f; border-radius: 4px; padding: 0 10px; font-family: 'Roboto', sans-serif; background: #fff; }
.purple { color: #8e24aa; font-weight: 500; }
.tr-select-btn {
  height: 36px; font-size: 13px; font-family: 'Roboto', sans-serif;
  border: 1px solid #74777f; border-radius: 4px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10L12 15L17 10H7Z' fill='%235E5E62'/%3E%3C/svg%3E") no-repeat right 4px center;
  background-size: 20px 20px;
  padding: 0 28px 0 12px; color: #212121;
  appearance: none; -webkit-appearance: none; cursor: pointer; flex-shrink: 0;
}

/* Person autocomplete dropdown */
.person-dropdown { overflow:hidden; }
.person-item { display:flex; align-items:center; padding:6px 12px; cursor:pointer; font-size:14px; color:#315084; }
.person-item:hover { font-weight:600; }

/* Outline button */
.btn-outline { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; background:transparent; border:1px solid #74777f; border-radius:4px; font-size:14px; color:#315084; cursor:pointer; font-family:var(--font-family); }
.btn-outline:hover { background:#f0f0f0; }

/* Delete icon button in menetleja rows */
.btn-icon-delete { background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; border-radius:4px; }
.btn-icon-delete:hover img { filter: brightness(0) saturate(100%) invert(11%) sepia(96%) saturate(3000%) hue-rotate(340deg) brightness(90%) contrast(95%) !important; }

/* Tab placeholder panel (prototype empty tabs) */
.tab-placeholder { display:flex; align-items:center; justify-content:center; min-height:200px; color:#757575; font-size:14px; font-style:italic; }
.tab-placeholder::before { content: 'See on prototüüp — selles vahekaardis andmed puuduvad.'; }

/* ── Seotud isikud tab ── */
.si-filter-bar { display:flex; align-items:center; height:48px; padding:0; }
.si-filter-label { font-size:16px; font-weight:400; color:#212121; flex:0 0 820px; white-space:nowrap; }
.si-filter-links { display:flex; align-items:center; gap:6px; margin-left:auto; }
.si-filter { font-size:14px; font-weight:400; color:#1a1b1f; text-decoration:none; white-space:nowrap; }
.si-filter.active { font-weight:600; color:#1c1b1f; }
.si-filter:hover { text-decoration:underline; }
.si-sep { color:#757575; font-size:14px; }
.si-badge { display:inline-block; font-size:12px; padding:2px 8px; border-radius:4px; font-weight:500; }
.si-badge--osaline { background:#e8f0fe; color:#1a56a3; }
.si-badge--esindaja { background:#e6f4ea; color:#1e6a30; }

/* si-filter-bar: Andmed left, Filtreerimine group right */
.si-filtreerimine { display:flex; align-items:center; gap:21px; flex:1; }
.si-select-type { display:flex; align-items:center; gap:4px; height:32px; padding:0 8px; font-size:14px; font-weight:400; color:#1a1b1f; cursor:pointer; white-space:nowrap; background:#fdfbff; margin-left:auto; border-radius:4px; }

/* Isikukood suggest dropdown rows */
.si-ik-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px; cursor:pointer; border-bottom:1px solid #f0f0f0; }
.si-ik-row:last-child { border-bottom:none; }
.si-ik-row:hover { background:#f0f2f5; }
.si-ik-name { font-size:14px; font-weight:500; color:#1c1b1f; }
.si-ik-code { font-size:13px; color:#757575; white-space:nowrap; }

/* Accordion rows in person detail view */
.si-accordion { display:flex; align-items:center; justify-content:space-between; padding:14px 0; cursor:pointer; border-bottom:1px solid #e0e0e0; font-size:16px; font-weight:400; color:#1c1b1f; }
.si-accordion:hover { background:#f7f7f7; }
.si-acc-arrow { transition:transform 0.2s ease; flex-shrink:0; }

/* ── Document view side menu (07.html Lahendid tab) ── */
.doc-side-menu { display:flex; flex-direction:column; }
.doc-side-item { display:block; padding:12px 16px; font-size:14px; font-weight:400; color:#1a1b1f; text-decoration:none; border-left:3px solid transparent; }
.doc-side-item:hover { background:rgba(49,80,132,0.06); }
.doc-side-item.active { color:#315084; font-weight:500; border-left-color:#315084; background:rgba(49,80,132,0.04); }

/* Chip (tag) component used in 07.html form fields */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: #e0e2ec;
  border-radius: 16px;
  font-size: 14px;
  color: #44474e;
  font-weight: 400;
  white-space: nowrap;
}
.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.chip-remove img {
  width: 15px;
  height: 15px;
  filter: brightness(0) saturate(100%) invert(38%) sepia(6%) saturate(300%) hue-rotate(202deg) brightness(100%) contrast(95%);
  display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ATOMIC COMPONENTS — date-field
   Usage:
     <div class="date-field">
       <input type="text" class="field-input" id="myDate"
              placeholder="PP.KK.AAAA" readonly
              onclick="dpOpen('myDate',event)">
       <img src="...calendar.svg" class="date-field-icon"
            onclick="dpOpen('myDate',event)">
     </div>
   Stretches to parent width. Icon always inside right side.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.date-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.date-field .field-input {
  width: 100%;
  padding-right: 40px;
  cursor: pointer;
  box-sizing: border-box;
}
/* Hide native browser date picker icon — only our custom calendar icon is shown */
.date-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}
.date-field input[type="date"]::-webkit-inner-spin-button { display: none; }
.date-field-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Tegevused dropdown animation ── */
#teg-dropdown { animation: tegSlide .15s ease forwards; }
@keyframes tegSlide {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══ Screen 12 — Lahendi koostamine ══ */
/* Section heading */
.section-h { font-size:16px;font-weight:400;color:#212121;margin:0 0 12px; }

/* White box for Resolutsioon / Asjaolud / Kohtu põhjendused sections */
.koos-section-box {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 32px;
}

/* Toggle card — bordered white card for each toggle item */
.tog-card { background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:8px; }

/* Toggle switch — Material 3 inspired */
.tog-row { display:flex;flex-direction:column;gap:8px; }
.tog-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
.tog-name { font-size:20px;font-weight:400;color:#44474e; }
.tog-desc { font-size:15px;color:#212121;margin:0; }
.tog-switch { position:relative;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0; }
.tog-switch input { position:absolute;opacity:0;width:0;height:0; }
.tog-track { display:flex;align-items:center;width:52px;height:32px;border-radius:16px;background:#bdbdbd;padding:2px;transition:background .2s;box-sizing:border-box; }
.tog-thumb { width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s; }
input:checked ~ .tog-track { background:#315084; }
input:checked ~ .tog-track .tog-thumb { transform:translateX(20px); }

/* Date picker wrap */
.dp-wrap { position:relative;display:inline-flex;align-items:center; }

/* Secondary button */
/* btn-secondary duplicate removed */

/* Ensure table-box used as white card section */
.table-box { border-radius:4px; }


/* ══ Screen 01 — Registration form (unique layout rules) ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Roboto', sans-serif;
  background: #ffffff;
  min-width: 1920px;
  max-width: 1920px;
  margin: 0 auto;
}
/* ── HEADER: h=82px, bg=#ffffff, padding: 0 168px ── */
.header {
  width: 1920px;
  height: 82px;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 168px;
}
/* Logo: x=168, y=15, w=297, h=50 */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  flex-shrink: 0;
}
.logo img {
  width: 60px;
  height: 50px;
  display: block;
}
/* "KOHTUTE INFOSÜSTEEM": Roboto 20px w=400 #000000 lh=33px */
.logo-text {
  font-size: 20px;
  font-weight: 400;
  color: #000000;
  line-height: 33px;
  white-space: nowrap;
}
/* Right side: margin-left: auto, h=36, gap=20px */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 36px;
}
/* "Kristina Kallaste": w=119 h=36, pad=8, Roboto 14px w=500 #315084 */
.btn-user {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #315084;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-user:hover { background: rgba(49,80,132,0.06); }
/* "HMK, Kantselei juhataja" dropdown: w=212 h=36, bg=#fdfbff, border=1px #c4c6d0, radius=4 */
.btn-profile {
  display: flex;
  align-items: center;
  width: 212px;
  height: 36px;
  padding: 6px 8px 6px 16px;
  background: #fdfbff;
  border: 1px solid #c4c6d0;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  cursor: pointer;
  gap: 16px;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.btn-profile:hover { background: #f5f3f8; }
.btn-profile span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.btn-profile svg { flex-shrink: 0; width: 24px; height: 24px; }
/* "Logi välja": border=none, bg=transparent, radius=4, pad=8px 20px */
.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #315084;
  cursor: pointer;
  white-space: nowrap;
}
.btn-logout:hover { background: rgba(49,80,132,0.06); }
/* ── NAVIGATION: x=168, w=1586, h=36, bg=#315084, radius=4 ── */
/* НЕ full width! Такой же отступ как контент */
.nav {
  width: 1586px;
  height: 36px;
  background: #315084;
  border-radius: 4px;
  margin-left: 168px;
  display: flex;
  align-items: stretch;
}
/* .nav-inner убран — nav сам содержит tabs + search */
/* Menu tabs */
.nav-tabs {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
/* Each nav-item: pad=8/24, Roboto 14px w=500 #fff */
.nav-item {
  display: flex;
  align-items: center;
  padding: 8px 24px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  outline: none;
}
.nav-item:hover { background: rgba(255,255,255,0.12); }
/* Active: fill=#001b3f radius=4 */
.nav-item.active { background: #001b3f; border-radius: 4px; }
/* Spacer → search right */
.nav-spacer { flex: 1; }
/* Search INSIDE nav bar, flush right: w=224 h=36 bg=#315084 with white inner */
.nav-search {
  display: flex;
  align-items: center;
  width: 240px;
  height: 36px;
  background: #315084;
  padding: 6px 16px 6px 16px;
  flex-shrink: 0;
}
.nav-search-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 24px;
  background: #fdfbff;
  border: 1px solid #74777f;
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 8px;
  justify-content: space-between;
}
.nav-search-inner input {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #5e5e62;
  width: 100%;
}
/* Placeholder: Roboto 14px w=400 #5e5e62 */
.nav-search-inner input::placeholder { color: #5e5e62; }
/* Search icon: SVG 24×24 fill=#315084 */
.nav-search-inner svg { width: 24px; height: 24px; flex-shrink: 0; }
/* ── PAGE: left margin 168px, title at y=139 ── */
/* y from nav=117, title at y=139 → 22px gap */
}
/* Page title: Roboto 24px w=400 #212121 lh=28 */
.page-title {
  font-size: 24px;
  font-weight: 400;
  color: #212121;
  line-height: 28.1px;
  margin-bottom: 20px;
/* y=139+28=167, card at 187 → 20px */
}
/* ── CARD (Frame 253): w=1586 h=560 fill=#fdfbff pad=16 shadow ── */
/* Card title: Roboto 20px w=400 #1a1b1f lh=28 */
/* 247-203-28=16 approx */
}
/* Form columns: layout=HORIZONTAL gap=16 */
.form-cols {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
/* Columns: flex:1 each, gap:20px vertical */
.col-left, .col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Select field: h=60 layout=VERTICAL */
.field {
  display: flex;
  flex-direction: column;
  height: 60px;
}
/* Label: Roboto 14px w=400 #5e5e62 lh=20 h=20 */
/* Input field: h=40 stroke=#74777f w=1 radius=4 pad=8/8/16/8 */
.field-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10L12 15L17 10H7Z' fill='%235E5E62'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 24px 24px;
  cursor: pointer;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
/* Date field: w=139 h=60 same style */
.field-date {
  width: 139px;
  height: 60px;
}
/* help icon: 24×24 fill=#1565c0 */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
/* "Loobu": w=72 h=36 fill=#fdfbff stroke=#74777f radius=4 pad=8/16, text 14px w=400 #315084 */
.kp-option { padding: 10px 16px; font-size: 14px; color: #212121; cursor: pointer; }
.kp-option:hover { background: #f0f2f5; }
.kp-option + .kp-option { border-top: 1px solid #e0e0e0; }
/* btn-secondary duplicate removed — use canonical definition at line 597 */
/* ── FOOTER: x=168 y=807 w=1588 h=58 ── */
.footer {
  width: 1920px;
  padding: 0 168px;
  height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-top: 32px;
}
/* Footer image (logos): x=1629 y=808, w=102 h=57 */
.footer-img {
  position: absolute;
  right: calc(1920px - 1629px - 102px);
  top: 1px;
  width: 102px;
  height: 57px;
  object-fit: contain;
}
/* Links row: y=807 layout=HORIZONTAL gap=10, Roboto 14px w=400 #002f66 lh=20 */
.footer-links {
  display: flex;
  align-items: center;
}
.footer-link {
  font-size: 14px;
  font-weight: 400;
  color: #002f66;
  line-height: 20px;
  text-decoration: none;
}
.footer-link:hover { text-decoration: underline; }
/* Separator "|": #c4c6d0 14px w=500 */
.footer-sep {
  color: #c4c6d0;
  font-size: 14px;
  font-weight: 500;
  margin: 0 10px;
}
/* Version: y=849 Roboto 14px w=500 #9e9e9e lh=16.4 */
.footer-version {
  font-size: 14px;
  font-weight: 500;
  color: #9e9e9e;
  line-height: 16.4px;
  margin-top: 10px;
}

.chip-x {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: #5e5e62;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chip-x:hover { color: #1c1b1f; }

/* ═══════════════════════════════════════════════════════════════════════════
   DATEPICKER POPUP
   ═══════════════════════════════════════════════════════════════════════════ */
.datepicker-popup {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border-radius: 4px;
  box-shadow: var(--shadow-popup);
  padding: 12px;
  min-width: 280px;
  display: none;
}

.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.dp-nav-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-nav-btn:hover {
  background: rgba(49, 80, 132, 0.08);
}

#dp-month-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 2px;
}

.dp-day-header {
  text-align: center;
  font-size: 11px;
  color: #757575;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-day {
  text-align: center;
  width: 36px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 13px;
  color: var(--text-dark);
  transition: background 0.2s;
}
.dp-day:hover {
  background: rgba(49, 80, 132, 0.08);
}

.dp-today {
  background: var(--primary);
  color: #fff;
}
.dp-today:hover {
  background: var(--primary-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEGEVUSED DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════ */
.teg-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border-radius: 4px;
  box-shadow: var(--shadow-popup);
  min-width: 200px;
  display: none;
  overflow: hidden;
}

.teg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-dark);
  white-space: nowrap;
  transition: background 0.2s;
}
.teg-item:hover {
  background: rgba(49, 80, 132, 0.08);
}
.teg-item img {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAHENDID SIDEBAR (left navigation in Lahendid tab)
   ═══════════════════════════════════════════════════════════════════════════ */
.lah-sidebar {
  flex: 0 0 340px;
  border-right: 1px solid #e0e0e0;
  padding: 8px 0;
}

.lah-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.15s;
  border-left: 2px solid transparent;
}

.lah-item:hover {
  color: #315084;
  border-left-color: #c4c6d0;
}

.lah-item.active {
  color: #315084;
  border-left-color: #315084;
}

/* ── Lahendid wizard nav ──────────────────────────────────────── */
#lah-wizard-nav {
  padding: 0 24px;
  background: #fdfbff;
  border-bottom: 1px solid #e0e0e0;
}
.lah-wiz-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  padding: 10px 4px 0;
  text-decoration: none;
  position: relative;
}
.lah-wiz-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8e8e8;
  color: #757575;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.lah-wiz-label {
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: #757575;
  font-weight: 400;
  padding: 6px 2px 0;
  transition: color 0.15s, font-weight 0.15s;
}
.lah-wiz-ind {
  width: 100%;
  height: 3px;
  background: transparent;
  margin-top: 8px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.lah-wiz-step:hover .lah-wiz-num { background: #d0d8e8; color: #315084; }
.lah-wiz-step:hover .lah-wiz-label { color: #315084; }
.lah-wiz-step:hover .lah-wiz-ind { background: #9e9e9e; }
.lah-wiz-step.active .lah-wiz-num { background: #315084; color: #fff; }
.lah-wiz-step.active .lah-wiz-label { color: #315084; font-weight: 500; }
.lah-wiz-step.active .lah-wiz-ind { background: #315084; }
.lah-wiz-connector {
  width: 16px;
  height: 1px;
  background: #c4c6d0;
  margin-top: 22px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* ── Lahendid sub-tabs (8 items, text wraps, auto height) ─────── */
.tab-item.lah-sub-tab { height: auto; min-height: 56px; }
.tab-item.lah-sub-tab .tab-frame { padding: 10px 12px; }
.tab-item.lah-sub-tab .tab-text { white-space: normal; font-size: 12px; line-height: 1.35; }
.tab-item.lah-sub-tab:not(.active):hover .tab-text { font-weight: 400; }
#lah-wizard-nav { gap: 4px; }

/* ── RR Seosed modal table — compact selects inside rows ────── */
#rr-seosed-tbody .table-row { align-items: center; min-height: 48px; }
#rr-seosed-tbody .table-row .field-select { height: 36px; width: 100%; min-width: 0; }
#rr-seosed-tbody .td { overflow: hidden; min-width: 0; }
#rr-seosed-tbody .td .chip { font-size: 11px; padding: 2px 8px; height: auto; }

/* ── Lahendi koostamine tab ──────────────────────────────────── */
#dtab-koostamine .section-h { margin-top: 0; margin-bottom: 12px; }
#dtab-koostamine .table-row { height: auto; min-height: 52px; align-items: center; }
#dtab-koostamine .tog-card { margin-bottom: 16px; }
#dtab-koostamine .field { margin-bottom: 12px; }
#dtab-koostamine .field:last-child { margin-bottom: 0; }

/* Reset fixed .field height inside Lahendid panels — allows textarea/multiline to grow */
#dtab-lahendid .field { height: auto; margin-bottom: 12px; }
#dtab-lahendid .field:last-child { margin-bottom: 0; }
#koos-lah-tbody .table-row .td .field-select { height: 36px; margin: 0; }
#koos-osalised-tbody .table-row .td .field-select { height: 36px; margin: 0; }

/* ── UI Kit compliance: normalize p2 structured form fields ─────────────────
   All .field-select and .field-input in p2 section boxes use 36px (compact)
   but override any inline height:28px/30px/32px set in JS-generated HTML.
   Date shortcut buttons (.p2-date-btn) are 32px compact chips.
   ──────────────────────────────────────────────────────────────────────── */
.koos-section-box .field-select,
.koos-section-box select.field-select {
  height: 36px !important;
}
.koos-section-box .field-input:not(textarea):not([type="number"]) {
  height: 36px !important;
}
.koos-section-box .date-field { width: auto; }
.koos-section-box .date-field .field-input { height: 36px !important; }

/* ── Date shortcut buttons (compact chip style) ────────────────────────── */
.p2-date-btn {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  background: #e8eaf6;
  color: #315084;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.p2-date-btn:hover { background: #c5cae9; }

/* ── Chip (from ui-kit) ─────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: #e0e2ec;
  border-radius: 16px;
  font-size: 14px;
  color: #44474e;
  white-space: nowrap;
}
.chip-remove {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* ── Dropdown arrow icon standard size ─────────────────────────────────── */
.icon-dropdown { width: 24px; height: 24px; }