/*
	ADF-layout.css
		- generated from ADF-layout.scss
   	- 'ADF-' class prefix
   v1.0.0
*/

// =======================================
// 1. Variables
// =======================================
$adf-grid-columns: 12;
$adf-gutter-x: 30px;
$adf-breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
$adf-spacers: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem
);

// Import Sass math module
@use "sass:math";

// =======================================
// 2. Base Row and Columns
// =======================================
.ADF-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: math.div(-$adf-gutter-x, 2);
  margin-right: math.div(-$adf-gutter-x, 2);
}

.ADF-col {
  flex: 1 0 0%;
  padding-left: math.div($adf-gutter-x, 2);
  padding-right: math.div($adf-gutter-x, 2);
  box-sizing: border-box;
}

.ADF-col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

@for $i from 1 through $adf-grid-columns {
  $width: math.div($i, $adf-grid-columns) * 100%;
  .ADF-col-#{$i} {
    flex: 0 0 #{$width};
    max-width: #{$width};
    padding-left: math.div($adf-gutter-x, 2);
    padding-right: math.div($adf-gutter-x, 2);
    box-sizing: border-box;
  }

  .ADF-offset-#{$i} {
    margin-inline-start: $width;
  }

  .ADF-order-#{$i} {
    order: $i;
  }
}

// =======================================
// 3. Responsive Columns, Offsets, Orders
// =======================================
@each $breakpoint, $min-width in $adf-breakpoints {
  @media (min-width: $min-width) {
    .ADF-col-#{$breakpoint}-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    @for $i from 1 through $adf-grid-columns {
      $width: math.div($i, $adf-grid-columns) * 100%;
      .ADF-col-#{$breakpoint}-#{$i} {
        flex: 0 0 #{$width};
        max-width: $width;
        padding-left: math.div($adf-gutter-x, 2);
        padding-right: math.div($adf-gutter-x, 2);
        box-sizing: border-box;
      }

      .ADF-offset-#{$breakpoint}-#{$i} {
        margin-inline-start: $width;
      }

      .ADF-order-#{$breakpoint}-#{$i} {
        order: $i;
      }
    }
  }
}

// =======================================
// 4. Spacing Utilities
// =======================================
@each $size, $space in $adf-spacers {
  .ADF-m-#{$size} { margin: $space !important; }
  .ADF-p-#{$size} { padding: $space !important; }

  .ADF-my-#{$size} {
    margin-top: $space !important;
    margin-bottom: $space !important;
  }
  .ADF-py-#{$size} {
    padding-top: $space !important;
    padding-bottom: $space !important;
  }

  .ADF-mx-#{$size} {
    margin-inline-start: $space !important;
    margin-inline-end: $space !important;
  }
  .ADF-px-#{$size} {
    padding-inline-start: $space !important;
    padding-inline-end: $space !important;
  }

  .ADF-mt-#{$size} { margin-top: $space !important; }
  .ADF-mb-#{$size} { margin-bottom: $space !important; }
  .ADF-pt-#{$size} { padding-top: $space !important; }
  .ADF-pb-#{$size} { padding-bottom: $space !important; }

  .ADF-ms-#{$size} { margin-inline-start: $space !important; }
  .ADF-me-#{$size} { margin-inline-end: $space !important; }
  .ADF-ps-#{$size} { padding-inline-start: $space !important; }
  .ADF-pe-#{$size} { padding-inline-end: $space !important; }
}

// =======================================
// 5. Negative Margins
// =======================================
@each $size, $space in $adf-spacers {
  @if $size != 0 {
    .ADF-mt-n#{$size} { margin-top: -$space !important; }
    .ADF-mb-n#{$size} { margin-bottom: -$space !important; }
    .ADF-ms-n#{$size} { margin-inline-start: -$space !important; }
    .ADF-me-n#{$size} { margin-inline-end: -$space !important; }

    .ADF-mx-n#{$size} {
      margin-inline-start: -$space !important;
      margin-inline-end: -$space !important;
    }

    .ADF-my-n#{$size} {
      margin-top: -$space !important;
      margin-bottom: -$space !important;
    }
  }
}

// =======================================
// 6. Text Alignment Utilities
// =======================================
.ADF-text-start { text-align: start !important; }
.ADF-text-end { text-align: end !important; }
.ADF-text-center { text-align: center !important; }
.ADF-text-justify { text-align: justify !important; }

@each $breakpoint, $min-width in $adf-breakpoints {
  @media (min-width: $min-width) {
    .ADF-text-#{$breakpoint}-start { text-align: start !important; }
    .ADF-text-#{$breakpoint}-end { text-align: end !important; }
    .ADF-text-#{$breakpoint}-center { text-align: center !important; }
    .ADF-text-#{$breakpoint}-justify { text-align: justify !important; }
  }
}

// =======================================
// 6a. Text Wrapping Utilities
// =======================================
.ADF-text-nowrap { white-space: nowrap !important; }

// =======================================
// 7. Font Weight Utilities
// =======================================
$adf-font-weights: (
  fw-light: 300,
  fw-normal: 400,
  fw-medium: 500,
  fw-semibold: 600,
  fw-bold: 700,
  fw-bolder: 900
);

@each $name, $weight in $adf-font-weights {
  .ADF-#{$name} {
    font-weight: $weight !important;
  }
}

// =======================================
// 8. Font Size Utilities
// =======================================

$adf-font-sizes-headings: (
  fs-1: 2.5rem,
  fs-2: 2rem,
  fs-3: 1.75rem,
  fs-4: 1.5rem,
  fs-5: 1.25rem,
  fs-6: 1rem
);

$adf-font-sizes-utilities: (
  fs-xs: 0.75rem,
  fs-sm: 0.875rem,
  fs-md: 1rem,
  fs-lg: 1.25rem,
  fs-xl: 1.5rem,
  fs-2xl: 2rem,
  fs-3xl: 2.5rem
);

@each $name, $size in $adf-font-sizes-headings {
  .ADF-#{$name} {
    font-size: $size !important;
  }
}

@each $name, $size in $adf-font-sizes-utilities {
  .ADF-#{$name} {
    font-size: $size !important;
  }
}

// =======================================
// 9. Display Utilities
// =======================================
$adf-displays: (
  none,
  inline,
  inline-block,
  block,
  grid,
  table,
  table-row,
  table-cell,
  flex,
  inline-flex
);

@each $display in $adf-displays {
  .ADF-d-#{$display} {
    display: $display !important;
  }
}

@each $breakpoint, $min-width in $adf-breakpoints {
  @media (min-width: $min-width) {
    @each $display in $adf-displays {
      .ADF-d-#{$breakpoint}-#{$display} {
        display: $display !important;
      }
    }
  }
}

// =======================================
// 10. Visibility Utilities
// =======================================
.ADF-visible { visibility: visible !important; }
.ADF-invisible { visibility: hidden !important; }

// =======================================
// 11. Flexbox Alignment Utilities
// =======================================

.ADF-justify-start { justify-content: flex-start !important; }
.ADF-justify-end { justify-content: flex-end !important; }
.ADF-justify-center { justify-content: center !important; }
.ADF-justify-between { justify-content: space-between !important; }
.ADF-justify-around { justify-content: space-around !important; }
.ADF-justify-evenly { justify-content: space-evenly !important; }

.ADF-align-start { align-items: flex-start !important; }
.ADF-align-end { align-items: flex-end !important; }
.ADF-align-center { align-items: center !important; }
.ADF-align-baseline { align-items: baseline !important; }
.ADF-align-stretch { align-items: stretch !important; }

.ADF-align-self-auto { align-self: auto !important; }
.ADF-align-self-start { align-self: flex-start !important; }
.ADF-align-self-end { align-self: flex-end !important; }
.ADF-align-self-center { align-self: center !important; }
.ADF-align-self-baseline { align-self: baseline !important; }
.ADF-align-self-stretch { align-self: stretch !important; }

// =======================================
// 12. Gap Utilities
// =======================================
$adf-gap-sizes: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem
);

@each $size, $gap in $adf-gap-sizes {
  .ADF-gap-#{$size} { gap: $gap !important; }
  .ADF-gap-x-#{$size} { column-gap: $gap !important; }
  .ADF-gap-y-#{$size} { row-gap: $gap !important; }
}

// =======================================
// 13. Text Transform Utilities
// =======================================
.ADF-text-uppercase { text-transform: uppercase !important; }
.ADF-text-lowercase { text-transform: lowercase !important; }
.ADF-text-capitalize { text-transform: capitalize !important; }

// =======================================
// 14. Border Utilities
// =======================================

// Show/hide border
.ADF-border {
  border: 1px solid currentColor !important;
}
.ADF-border-0 {
  border: 0 !important;
}

// Border sides
.ADF-border-top {
  border-top: 1px solid currentColor !important;
}
.ADF-border-bottom {
  border-bottom: 1px solid currentColor !important;
}
.ADF-border-start {
  border-inline-start: 1px solid currentColor !important;
}
.ADF-border-end {
  border-inline-end: 1px solid currentColor !important;
}

// Remove border per side
.ADF-border-top-0 {
  border-top: 0 !important;
}
.ADF-border-bottom-0 {
  border-bottom: 0 !important;
}
.ADF-border-start-0 {
  border-inline-start: 0 !important;
}
.ADF-border-end-0 {
  border-inline-end: 0 !important;
}

// Border width
@for $i from 1 through 5 {
  .ADF-border-#{$i} {
    border-width: #{$i}px !important;
  }
}

// Border radius
.ADF-rounded {
  border-radius: 0.25rem !important;
}
.ADF-rounded-0 {
  border-radius: 0 !important;
}
.ADF-rounded-1 {
  border-radius: 0.2rem !important;
}
.ADF-rounded-2 {
  border-radius: 0.25rem !important;
}
.ADF-rounded-3 {
  border-radius: 0.3rem !important;
}
.ADF-rounded-circle {
  border-radius: 50% !important;
}
.ADF-rounded-pill {
  border-radius: 50rem !important;
}

// Border color utilities (sample palette)
$adf-border-colors: (
  primary: #0d6efd,
  secondary: #6c757d,
  success: #198754,
  danger: #dc3545,
  warning: #ffc107,
  info: #0dcaf0,
  light: #dddddd, 		// <== changed from #f8f9fa
  dark: #212529
);

@each $name, $color in $adf-border-colors {
  .ADF-border-#{$name} {
    border-color: $color !important;
  }
}

// =======================================
// 15. Button Utilities
// =======================================

$adf-btn-padding-y: 0.375rem;
$adf-btn-padding-x: 0.75rem;
$adf-btn-font-size: 1rem;
$adf-btn-border-radius: 0.25rem;

$adf-btn-colors: (
  primary: #0d6efd,
  secondary: #6c757d,
  success: #198754,
  danger: #dc3545,
  warning: #ffc107,
  info: #0dcaf0,
  light: #f8f9fa,
  dark: #212529
);

// Base Button
.ADF-btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  padding: $adf-btn-padding-y $adf-btn-padding-x;
  font-size: $adf-btn-font-size;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: $adf-btn-border-radius;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

// Generate Variants
@each $name, $color in $adf-btn-colors {
  .ADF-btn-#{$name} {
    color: if($name == light, #000, #fff);
    background-color: $color;
    border-color: $color;

    &:hover {
      background-color: darken($color, 7%);
      border-color: darken($color, 10%);
      text-decoration: none;
    }
  }

  .ADF-btn-outline-#{$name} {
    color: $color;
    background-color: transparent;
    border-color: $color;

    &:hover {
      background-color: $color;
      color: if($name == light, #000, #fff);
    }
  }
}

// Button sizes
.ADF-btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

.ADF-btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

// =======================================
// 16. Form Control Utilities
// =======================================

$adf-input-padding-y: 0.375rem;
$adf-input-padding-x: 0.75rem;
$adf-input-font-size: 1rem;
$adf-input-line-height: 1.5;
$adf-input-border-radius: 0.25rem;

$adf-input-border-color: #ced4da;
$adf-input-bg: #fff;
$adf-input-color: #212529;
$adf-input-focus-border: #86b7fe;
$adf-input-focus-shadow: rgba(13, 110, 253, 0.25);

// Base form control
.ADF-form-control {
  display: block;
  width: 100%;
  padding: $adf-input-padding-y $adf-input-padding-x;
  font-size: $adf-input-font-size;
  line-height: $adf-input-line-height;
  color: $adf-input-color;
  background-color: $adf-input-bg;
  background-clip: padding-box;
  border: 1px solid $adf-input-border-color;
  border-radius: $adf-input-border-radius;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &:focus {
    color: $adf-input-color;
    background-color: $adf-input-bg;
    border-color: $adf-input-focus-border;
    outline: 0;
    box-shadow: 0 0 0 0.2rem $adf-input-focus-shadow;
  }

  &::placeholder {
    color: #6c757d;
    opacity: 1;
  }

  &:disabled, &[readonly] {
    background-color: #e9ecef;
    opacity: 1;
  }
}

// Specific style for select
.ADF-form-select {
  display: block;
  width: 100%;
  padding: $adf-input-padding-y $adf-input-padding-x;
  font-size: $adf-input-font-size;
  line-height: $adf-input-line-height;
  color: $adf-input-color;
  background-color: $adf-input-bg;
  border: 1px solid $adf-input-border-color;
  border-radius: $adf-input-border-radius;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;

  &:focus {
    border-color: $adf-input-focus-border;
    outline: 0;
    box-shadow: 0 0 0 0.2rem $adf-input-focus-shadow;
  }
}

// Sizes
.ADF-form-control-sm,
.ADF-form-select-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

.ADF-form-control-lg,
.ADF-form-select-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

// =======================================
// 17. Checkboxes & Radios (refined)
// =======================================

.ADF-form-check {
  position: relative;
  display: block;
  padding-left: 1.5em;
  margin-bottom: 0.5rem;
}

.ADF-form-check-input {
  position: absolute;
  margin-top: 0.25em;
  margin-left: -1.5em;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid #ced4da;
  appearance: none;
  cursor: pointer;

  &:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  }
}

// ✅ Checkboxes: square
.ADF-form-check-input[type="checkbox"] {
  border-radius: 0.25rem; // small rounded square

  &:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.97 4.97a.75.75 0 010 1.06L7.477 11.53a.75.75 0 01-1.06 0L3.03 8.143a.75.75 0 111.06-1.06L6.97 9.97l5.94-5.94a.75.75 0 011.06 0z'/%3E%3C/svg%3E");
  }
}

// ✅ Radios: round
.ADF-form-check-input[type="radio"] {
  border-radius: 50%;

  &:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
  }
}

.ADF-form-check-label {
  margin-bottom: 0;
  cursor: pointer;
}

// Inline variant
.ADF-form-check-inline {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  margin-right: 1rem;

  .ADF-form-check-input {
    position: static;
    margin-right: 0.5em;
    margin-left: 0;
  }
}