/* ================================================
   DOAE HRCS — Component Library Tokens
   ทำงานร่วมกับ Bootstrap 4.0.0-beta + CSS Variables เดิม

   ⚠️ Variables เดิมที่มีอยู่แล้วใน Layout (ห้ามสร้างซ้ำ):
   --body_bg, --body_font, --content_bg, --content_font,
   --field_bg, --field_font, --field_border,
   --menu_bg, --menu_bg_active, --menu_bg_hover, --menu_font,
   --sidebar_bg, --sidebar_font,
   --button_bg, --button_bg2, --button_font, --button_bg_hover,
   --table_bg, --table_font,
   --head_bg, --head_bg2, --head_font,
   --footer_bg, --footer_font

   ไฟล์นี้เพิ่มเฉพาะ tokens ที่ยังไม่มีในระบบเดิม
   ================================================ */

:root {
  /* Semantic Status Colors (ไม่มีในระบบเดิม) */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Spacing scale (ไม่มีในระบบเดิม) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Border radius (ไม่มีในระบบเดิม) */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Shadows (ไม่มีในระบบเดิม) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Date Picker Layout Fixes (ป้องกันการยืดตัวแนวตั้งจากการ override ใน style1.css)
   ========================================================================== */
.ds-date-input.input-group {
  width: 100% !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  height: 38px !important;
}

.ds-date-input.input-group .ds-date-display {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  font-size: 14px !important;
  padding: 0.375rem 0.75rem !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px 0 0 4px !important;
  box-shadow: none !important;
  background-color: #fff !important;
}

.ds-date-input.input-group .input-group-append {
  display: flex !important;
  margin-left: -1px;
}

.ds-date-input.input-group .input-group-text {
  background-color: #e9ecef !important;
  border: 1px solid #ced4da !important;
  color: #495057 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  border-radius: 0 4px 4px 0 !important;
  height: 38px !important;
  min-width: 40px;
}

/* ==========================================================================
   Dropdown Menu Core Alignment
   ========================================================================== */
.dropdown-menu {
  z-index: 1050 !important;
}

.dropdown-menu-right {
  right: 0 !important;
  left: auto !important;
}

/* ==========================================================================
   Sidebar Core Layout & Alignment Fixes
   ========================================================================== */
.ds-sidebar {
  flex-shrink: 0 !important;
}

.ds-sidebar__menu,
.ds-sidebar__menu li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.ds-sidebar__link {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.ds-sidebar__label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
}

/* ==========================================================================
   Responsive Code Block Container Fixes
   ========================================================================== */
pre.ds-code {
  max-width: 100% !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

/* ==========================================================================
   Top Navbar Search Field Layout Fixes
   ========================================================================== */
.navbar .input-group-sm .form-control {
  font-size: 14px !important;
  height: 31px !important;
  padding: 0.25rem 0.75rem !important;
  line-height: 1.5 !important;
}

.navbar .input-group-sm .btn {
  height: 31px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   File Uploader Multi List Row Polish
   ========================================================================== */
.ds-file-uploader-multi .ds-existing-files ul li,
.ds-file-uploader-multi .ds-file-list li {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 6px 12px !important;
  background-color: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  border-radius: 4px !important;
  margin-bottom: 6px !important;
}

.ds-file-uploader-multi .ds-existing-files ul li a,
.ds-file-uploader-multi .ds-file-list li span {
  flex: 1 1 auto !important;
  margin-right: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #333 !important;
  font-size: 14px !important;
}

.ds-file-uploader-multi .ds-existing-files ul li a:hover {
  text-decoration: underline !important;
  color: var(--ds-color-primary, #01a9ac) !important;
}

.ds-file-uploader-multi .ds-existing-files ul li .ds-existing-remove,
.ds-file-uploader-multi .ds-file-list li .ds-file-remove,
.ds-file-uploader-multi .ds-file-list li .ds-file-move {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 0 0 6px !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

.ds-file-uploader-multi .ds-existing-files ul li .ds-existing-remove:hover,
.ds-file-uploader-multi .ds-file-list li .ds-file-remove:hover {
  color: #dc3545 !important;
}

/* ==========================================================================
   Textarea Sizing & Height Override
   ========================================================================== */
textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   Date Input Sizing & Icon Alignment
   ========================================================================== */
.ds-date-input.input-group {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}

.ds-date-input.input-group .form-control {
  flex: 1 1 auto !important;
  width: 1% !important;
  height: 38px !important;
}

.ds-date-input.input-group .input-group-append {
  display: flex !important;
  flex-shrink: 0 !important;
}

.ds-date-input.input-group .input-group-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-width: 40px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ==========================================================================
   Workflow Stepper Responsive wrapping & Sizing
   ========================================================================== */
.ds-workflow-stepper {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  overflow: visible !important;
}

.ds-workflow-stepper__item {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 120px !important;
  max-width: 100% !important;
  margin-bottom: 10px !important;
}

.ds-workflow-stepper__item:last-child {
  flex: 0 0 auto !important;
  min-width: auto !important;
}

.ds-workflow-stepper__line {
  flex-grow: 1 !important;
  min-width: 20px !important;
  border-top: 1px solid #dee2e6 !important;
}

.ds-workflow-stepper__title {
  max-width: 120px !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   Tab Navigation Mobile Horizontal Scrolling
   ========================================================================== */
.nav-tabs.nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
  border-bottom: 1px solid #dee2e6 !important;
}

.nav-tabs.nav::-webkit-scrollbar {
  height: 5px !important;
}

.nav-tabs.nav::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
}

.nav-tabs.nav .nav-item {
  flex: 0 0 auto !important;
}