/* ============================================================================
   TASKEEN UI COMPONENTS
   Version: 1.0
   
   This file contains all reusable component styles following the
   Taskeen Design System specifications.
============================================================================ */

/* ============================================================================
   BUTTONS
============================================================================ */

/* Primary Button */
.main-btn,
.btn-primary-taskeen {
  display: flex;
  height: 2.25rem;
  padding: 0rem 0.8rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  border-radius: var(--radius-sm-alt);
  border: none;
  background: var(--Main-Colors-Main);

  color: var(--main-colors-white-white);
  font-family: var(--font-default);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: var(--line-height-body-lg);

  cursor: pointer;
  transition: var(--transition-default);
}

.main-btn:hover,
.btn-primary-taskeen:hover {
  background: var(--primary-tint-shades-primary-shade-80);
  box-shadow: 0px 4px 8px rgba(43, 86, 49, 0.2);
  transform: translateY(-1px);
}

.main-btn:active,
.btn-primary-taskeen:active {
  transform: translateY(0);
  box-shadow: 0px 2px 4px rgba(43, 86, 49, 0.2);
}

/* Secondary/Outline Button */
.outline-btn,
.btn-secondary-taskeen {
  display: flex;
  height: 2.25rem;
  padding: 0.375rem 0.8rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  border-radius: var(--radius-sm-alt);
  border: 1px solid var(--Gray-Gray-Tint-20);
  background: var(--Main-Colors-White);

  color: var(--Text-Colors-Black);
  font-family: var(--font-default);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: var(--line-height-body-lg);

  cursor: pointer;
  transition: var(--transition-default);
}

.outline-btn:hover,
.btn-secondary-taskeen:hover {
  background: var(--Gray-Gray-Tint-5);
  border-color: var(--Main-Colors-Main);
}

/* Clear/Text Button */
.clear-btn,
.btn-text-taskeen {
  display: flex;
  height: var(--button-height-md);
  padding: 0rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;

  border-radius: var(--radius-sm-alt);
  border: 1px solid var(--Main-Colors-Main);
  background: transparent;

  color: var(--Main-Colors-Main);
  font-family: var(--font-default);
  font-size: var(--font-size-body-lg);
  font-weight: 700;
  line-height: var(--line-height-body-lg);

  cursor: pointer;
  transition: var(--transition-default);
}

.clear-btn:hover,
.btn-text-taskeen:hover {
  background: var(--Other-Primary-Tint);
}

/* Standardized Action Buttons */
.btn-view,
.btn-icon-taskeen {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 0.4rem;
  justify-content: center;
  align-items: center;

  border-radius: var(--radius-sm-alt);
  border: 1px solid transparent;
  background: transparent;
  color: var(--Text-Colors-Black);
  /* High contrast: Dark in light, White in dark */

  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-view:hover,
.btn-icon-taskeen:hover {
  background: var(--Main-Colors-Main);
  border-color: var(--Main-Colors-Main);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(43, 86, 49, 0.2);
}

.btn-view svg,
.btn-icon-taskeen svg {
  color: currentColor;
  transition: color 0.2s ease;
}

/* ============================================================================
   CARDS
============================================================================ */

/* Standard Card */
.contract-card,
.card-taskeen {
  display: flex;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  border-radius: var(--radius-lg);
  border: 1px solid var(--Gray-Gray-Tint-20);
  background: var(--Other-BG);
  box-shadow: var(--shadow-card);

  transition: var(--transition-default);
}

.contract-card:hover,
.card-taskeen:hover {
  box-shadow: 0px 8px 24px rgba(87, 67, 49, 0.12);
  transform: translateY(-2px);
}

/* Card with Details */
.card-details {
  display: flex;
  padding: var(--card-padding-lg);
  align-items: center;
  gap: 3rem;
  align-self: stretch;

  border-radius: var(--radius-lg);
  border: 1px solid var(--Gray-Gray-Tint-20);
  background: var(--Other-BG);
}

/* ============================================================================
   TABLES
============================================================================ */

.main-table,
.table-taskeen {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--Gray-Gray-Tint-20);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.main-table th,
.table-taskeen th {
  height: 2.75rem;
  padding: 0.9375rem 1rem 1rem 1rem;
  background: var(--main-colors-white-white);

  color: var(--Text-Colors-Dark-Gray);
  font-family: var(--font-arabic);
  font-size: var(--font-size-body-md);
  font-weight: 500;
  line-height: var(--line-height-body-md);
  text-align: left;
}

.main-table td,
.table-taskeen td {
  height: 4.5rem;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid #EAECF0;

  color: var(--Text-Colors-Dark-Gray);
  font-family: var(--font-default);
  font-size: var(--font-size-body-lg);
  font-weight: 400;
  line-height: var(--line-height-body-lg);
}

/* Alternating row colors */
.main-table tbody tr:nth-child(odd),
.table-taskeen tbody tr:nth-child(odd) {
  background: var(--Gray-50);
}

.main-table tbody tr:nth-child(even),
.table-taskeen tbody tr:nth-child(even) {
  background-color: var(--main-colors-white-white);
}

/* Hover state */
.main-table tbody tr:hover,
.table-taskeen tbody tr:hover {
  background: var(--Other-Primary-Tint);
}

/* ============================================================================
   FORM INPUTS
============================================================================ */

/* Text Input */
.capacity-input,
.input-taskeen {
  display: flex;
  min-height: var(--input-height);
  padding: 0.5rem 0.75rem;
  align-items: center;

  border-radius: var(--radius-sm-alt);
  border: 1px solid #E2E8F0;
  background: var(--main-colors-white-white);

  color: var(--Text-Colors-md-Gray);
  font-family: var(--font-default);
  font-size: var(--font-size-body-md);
  font-weight: 400;
  line-height: var(--line-height-body-md);

  transition: var(--transition-fast);
}

.capacity-input:focus,
.input-taskeen:focus {
  outline: none;
  border-color: var(--Main-Colors-Main);
  box-shadow: 0 0 0 3px var(--Other-Primary-Tint);
}

/* Search Input */
.search-filter-btn {
  display: flex;
  padding: 0.5rem 0.75rem;
  align-items: center;
  gap: 0.5rem;

  border-radius: var(--radius-md);
  border: 1px solid var(--Gray-Gray-Tint-20);
  background: var(--Other-BG);
  width: 30.5rem;
}

.search-input {
  border: none;
  flex: 1 0 0;

  color: var(--Text-Colors-md-Gray);
  font-family: var(--font-default);
  font-size: var(--font-size-body-md);
  font-weight: 400;
  line-height: var(--line-height-body-md);
}

.search-input:focus {
  outline: none;
}

/* Dropdown/Select */
.capacity-dropdown,
.select-taskeen {
  display: flex;
  min-height: var(--input-height);
  padding: 0.5rem 0.75rem;
  align-items: center;
  gap: 0.75rem;

  border-radius: var(--radius-sm-alt);
  border: 1px solid #E2E8F0;
  background: var(--main-colors-white-white);

  color: var(--Text-Colors-md-Gray);
  font-family: var(--font-default);
  font-size: var(--font-size-body-md);
  font-weight: 400;
  line-height: var(--line-height-body-md);

  cursor: pointer;
  transition: var(--transition-fast);
}

.capacity-dropdown:hover,
.select-taskeen:hover {
  border-color: var(--Main-Colors-Main);
}

/* Checkbox */
.table-select,
.checkbox-taskeen {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-xs);
  border: 2px solid var(--Text-Colors-Dark-Gray);
  cursor: pointer;
}

.table-select:checked,
.checkbox-taskeen:checked {
  background: var(--Main-Colors-Main);
  border-color: var(--Main-Colors-Main);
}

/* ============================================================================
   STATUS BADGES
============================================================================ */

/* Default Status */
.status,
.badge-default {
  display: flex;
  height: 1.5rem;
  padding: 0.375rem 0.75rem;
  align-items: center;
  gap: 0.375rem;

  border-radius: var(--radius-sm-alt);
  background: var(--Gray-Gray-Tint-5);

  color: var(--Text-Colors-md-Gray);
  font-family: var(--font-default);
  font-size: var(--font-size-body-lg);
  font-weight: 500;
  line-height: var(--line-height-body-lg);
}

/* Success Status */
.tent-status,
.badge-success {
  display: flex;
  padding: 0.4375rem 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;

  border-radius: var(--radius-sm-alt);
  border: 1px solid var(--primary-tint-shades-primary-shade-80);
  background: var(--Other-Primary-Tint);

  color: var(--Main-Colors-Main);
  font-family: var(--font-default);
  font-size: var(--font-size-body-md);
  font-weight: 700;
  line-height: var(--line-height-body-md);
}

/* Insufficient Status */
.insufficient-btn,
.badge-neutral {
  display: flex;
  padding: 0.6875rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;

  border-radius: var(--radius-sm-alt);
  background: var(--Gray-Gray-Tint-5);

  color: var(--Text-Colors-md-Gray);
  font-size: var(--font-size-body-md);
  font-weight: 600;
  line-height: var(--line-height-body-md);
}

/* Sufficient Status */
.sufficient-btn,
.badge-sufficient {
  display: flex;
  padding: 0.6875rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;

  border-radius: var(--radius-sm-alt);
  background: var(--Other-Primary-Tint);

  color: var(--Main-Colors-Main);
  font-size: var(--font-size-body-md);
  font-weight: 600;
  line-height: var(--line-height-body-md);
}

/* Error/Deficit Status */
.deficit-input,
.badge-error {
  display: flex;
  min-height: var(--input-height);
  padding: 0.5rem 0.75rem;
  align-items: center;
  gap: 0.75rem;

  border-radius: var(--radius-sm-alt);
  background: var(--Other-Red-Tint);

  color: var(--Other-Red-Alt);
  font-family: var(--font-default);
  font-size: var(--font-size-body-md);
  font-weight: 400;
  line-height: var(--line-height-body-md);
}

/* ============================================================================
   NAVIGATION
============================================================================ */

/* Left Sidebar */
.left-nav {
  width: var(--left-nav-width);
  height: 100vh;
  flex-shrink: 0;

  position: fixed;
  top: 0;
  z-index: 1050;

  background: var(--main-colors-white-white);
  box-shadow: var(--shadow-card);
}

.left-nav:not(:lang(ar)) {
  left: 0;
  border-radius: 0rem 2rem 2rem 0rem;
}

.left-nav:lang(ar) {
  right: 0;
  border-radius: 2rem 0rem 0rem 2rem;
}

/* Nav Item */
.left-nav .nav-item {
  display: flex;
  padding: 0.75rem;
  align-items: center;
  gap: 0.5rem;
  margin-top: 12px;

  color: var(--Text-Colors-Dark-Gray);
  font-family: var(--font-arabic);
  font-size: var(--font-size-body-lg);
  font-weight: 600;
  line-height: var(--line-height-body-lg);

  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.left-nav .nav-item:hover {
  background: var(--Other-Primary-Tint);
}

/* Active Nav Item */
.left-nav .nav-item.router-link-active,
.left-nav .nav-item.active {
  border-radius: var(--radius-xs);
  background: var(--Other-Primary-Tint);

  color: var(--Main-Colors-Main);
  font-weight: 700;
  line-height: 1.5rem;
}

/* LTR (English) */
.left-nav .nav-item.router-link-active:not(:lang(ar)),
.left-nav .nav-item.active:not(:lang(ar)) {
  border-left: 4px solid var(--Main-Colors-Main);
}

/* RTL (Arabic) */
.left-nav .nav-item.router-link-active:lang(ar),
.left-nav .nav-item.active:lang(ar) {
  border-right: 4px solid var(--Main-Colors-Main);
}

/* Nav Icons */
.left-nav .nav-item svg {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.left-nav .nav-item svg path {
  stroke: var(--Text-Colors-md-Gray);
}

.left-nav .nav-item.router-link-active svg path,
.left-nav .nav-item.active svg path {
  stroke: var(--Main-Colors-Main);
}

/* Header */
.hedr,
.header-taskeen {
  display: flex;
  padding: 0.8125rem 1.5rem 0.8125rem 3rem;
  justify-content: flex-end;
  align-items: center;

  width: calc(100vw - var(--left-nav-width));
  height: var(--header-height);

  background: var(--main-colors-white-white);
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 1.75rem;
}

.hedr:not(:lang(ar)),
.header-taskeen:not(:lang(ar)) {
  margin-left: var(--left-nav-width);
}

.hedr:lang(ar),
.header-taskeen:lang(ar) {
  margin-right: var(--left-nav-width);
}

/* ============================================================================
   TYPOGRAPHY CLASSES
============================================================================ */

.page-title {
  font-family: var(--font-default);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  line-height: var(--line-height-page-title);
  color: var(--Text-Colors-Black);
}

.section-title {
  font-family: var(--font-default);
  font-size: var(--font-size-section-title);
  font-weight: 700;
  line-height: var(--line-height-section-title);
  color: var(--Text-Colors-Dark-Gray);
}

.card-title {
  font-family: var(--font-default);
  font-size: var(--font-size-card-title);
  font-weight: 700;
  line-height: var(--line-height-card-title);
}

.body-xl {
  font-family: var(--font-default);
  font-size: var(--font-size-body-xl);
  font-weight: 700;
  line-height: var(--line-height-body-xl);
}

.body-lg {
  font-family: var(--font-default);
  font-size: var(--font-size-body-lg);
  font-weight: 400;
  line-height: var(--line-height-body-lg);
}

.body-lg-bold {
  font-weight: 700;
}

.body-lg-medium {
  font-weight: 500;
}

.body-md {
  font-family: var(--font-default);
  font-size: var(--font-size-body-md);
  font-weight: 400;
  line-height: var(--line-height-body-md);
}

.body-md-bold {
  font-weight: 700;
}

.body-md-semibold {
  font-weight: 600;
}

.body-md-medium {
  font-weight: 500;
}

.body-sm {
  font-family: var(--font-secondary);
  font-size: var(--font-size-body-sm);
  font-weight: 700;
}

/* ============================================================================
   BACKDROP EFFECTS
============================================================================ */

.backdrop-blur {
  backdrop-filter: blur(6px);
}

.backdrop-blur-strong {
  backdrop-filter: blur(17px);
}

.map-layout {
  background: rgba(5, 26, 8, 0.6);
  backdrop-filter: blur(6px);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
}

/* ============================================================================
   INTERACTIVE STATES
============================================================================ */

.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ============================================================================
   END OF TASKEEN UI COMPONENTS
============================================================================ */