@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
@import '~@clr/icons/clr-icons.min.css';

// Modern Design System Imports
@import './styles/design-tokens';
@import './styles/theme-variables';
@import './styles/base';
@import './styles/components';
@import './styles/animations';

// Google Fonts - Modern Typography
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');

/* Legacy font set ==================== */
@import url(https://fonts.googleapis.com/css?family=Athiti|Bai+Jamjuree|Chakra+Petch|Charmonman|Chonburi|Fahkwang|Itim|K2D|Kanit|KoHo|Kodchasan|Krub|Maitree|Mali|Mitr|Niramit|Pattaya|Pridi|Prompt|Sriracha|Srisakdi|Taviraj|Trirong);

.font-athiti { font-family: 'Athiti', sans-serif; }
.font-bai-jamjuree { font-family: 'Bai Jamjuree', sans-serif; }
.font-chakra-petch { font-family: 'Chakra Petch', sans-serif; }
.font-charmonman { font-family: 'Charmonman', cursive; }
.font-chonburi { font-family: 'Chonburi', cursive; }
.font-fahkwang { font-family: 'Fahkwang', sans-serif; }
.font-itim { font-family: 'Itim', cursive; }
.font-k2d { font-family: 'K2D', sans-serif; }
.font-kodchasan { font-family: 'Kodchasan', sans-serif; }
.font-kanit { font-family: 'Kanit', sans-serif;  }
.font-koHo { font-family: 'KoHo', sans-serif; }
.font-krub { font-family: 'Krub', sans-serif; }
.font-mali { font-family: 'Mali', cursive; }
.font-mitr { font-family: 'Mitr', sans-serif; }
.font-maitree { font-family: 'Maitree', serif; }
.font-niramit { font-family: 'Niramit', sans-serif; }
.font-pattaya { font-family: 'Pattaya', sans-serif; }
.font-pridi { font-family: 'Pridi', serif; }
.font-prompt { font-family: 'Prompt', sans-serif; }
.font-srisakdi { font-family: 'Srisakdi', cursive; }
.font-taviraj { font-family: 'Taviraj', serif; }
.font-sriracha { font-family: 'Sriracha', cursive; }
.font-trirong { font-family: 'Trirong', serif; }

@font-face {
   font-family: 'th-sarabun';
   src: url('./assets/fonts/THSarabun.ttf') format('truetype'),
        url('/assets/fonts/THSarabun Bold.ttf') format('truetype'),
        url('/assets/fonts/THSarabun Italic.ttf') format('truetype'),
        url('/assets/fonts/THSarabun Bold Italic.ttf') format('truetype');
 }
.font-thsarabun { font-family: 'th-sarabun', cursive; font-size : 16pt; }

.font-bold { font-weight: bold; }
.font-italic { font-style: italic; }
/* end font set ==================== */

.breadcrumb {
  font-family: 'Trirong', serif;
  margin-top: 0px;
}

.breadcrumb-arrow {
  height: 36px;
  padding: 0;
  line-height: 36px;
  list-style: none;
  background-color: #ebeceb
}
.breadcrumb-arrow li:first-child a {
  border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px
}
.breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span {
  display: inline-block;
  vertical-align: top
}
.breadcrumb-arrow li:not(:first-child) {
  margin-left: -5px
}
.breadcrumb-arrow li+li:before {
  padding: 0;
  content: ""
}
.breadcrumb-arrow li span {
  padding: 0 10px
}
.breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span {
  height: 36px;
  padding: 0 10px 0 25px;
  line-height: 36px
}
.breadcrumb-arrow li:first-child a {
  padding: 0 10px
}
.breadcrumb-arrow li a {
  position: relative;
  color: #fff;
  text-decoration: none;
  background-color: rgb(128, 130, 131);
  border: 1px solid rgb(128, 130, 131);
}
.breadcrumb-arrow li:first-child a {
  padding-left: 10px
}
.breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before {
  position: absolute;
  top: -1px;
  width: 0;
  height: 0;
  content: '';
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent
}
.breadcrumb-arrow li a:before {
  right: -10px;
  z-index: 3;
  border-left-color: rgb(128, 130, 131);
  border-left-style: solid;
  border-left-width: 11px
}
.breadcrumb-arrow li a:after {
  right: -11px;
  z-index: 2;
  border-left: 11px solid #38393a
}
.breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover {
  background-color: #b7bbb7;
  border: 1px solid #b7bbb7;
  text-shadow: 1px 1px 1px rgb(20, 20, 20);
}
.breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before {
  border-left-color: #b7bbb7
}
.breadcrumb-arrow li a:active {
  background-color: #c5ccc5;
  border: 1px solid #c5ccc5; 
}
.breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before {
  border-left-color: #adb6ad;
}
.breadcrumb-arrow li span {
  color: #7e8a83;
}

.full-div {
padding: 0px 0px 0px 0px;
height: 100vh;
width: 100%;
margin-right: 0;
}

.dg-wrapper {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  height: 500px;
}

.dg-wrapper-300 {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  height: 300px;
}

.dg-wrapper-400 {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  height: 400px;
}

.dg-wrapper-450 {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  height: 450px;
}

.dg-wrapper-500 {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.dg-wrapper-600 {
  display: flex;
  flex-direction: column;
  height: 600px;
}

.dg-wrapper-700 {
  display: flex;
  flex-direction: column;
  height: 700px;
}

.dg-wrapper-800 {
  display: flex;
  flex-direction: column;
  height: 800px;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

// Global styles for enhanced components
.btn {
  @extend .modern-btn;
}

.modal-dialog {
  @extend .modern-modal;
  
  .modal-header {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    color: $white;
    border-radius: $radius-2xl $radius-2xl 0 0;
    
    .modal-title {
      color: $white;
      font-weight: $font-bold;
    }
    
    .close {
      color: $white;
      opacity: 0.8;
      
      &:hover {
        opacity: 1;
      }
    }
  }
  
  .modal-body {
    padding: $space-6;
  }
  
  .modal-footer {
    padding: $space-5 $space-6;
    background: $gray-50;
    border-radius: 0 0 $radius-2xl $radius-2xl;
  }
}

.datagrid {
  @extend .modern-table;
}

.badge {
  @extend .modern-badge;
}

.alert {
  @extend .modern-alert;
}

.spinner {
  @extend .modern-spinner;
}

.skeleton {
  @extend .modern-skeleton;
}

.form-group {
  @extend .modern-form-group;
  
  .form-label {
    @extend .form-label;
  }
  
  .form-input, .form-select {
    @extend .form-input;
  }
  
  .form-error {
    @extend .form-error;
  }
}