@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Design tokens (ported from the redesign's Tailwind v4 source) ──
   Tailwind v3 has no @theme/@utility syntax, so the tokens are plain CSS
   custom properties here and wired into theme.extend.colors in
   config/tailwind.config.js instead of the v4 `@theme inline` block. */
:root {
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --font-sans: "Cairo", "DM Sans", "IBM Plex Sans Arabic", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", "Cairo", ui-sans-serif, system-ui, sans-serif;
  --font-numeric: "Space Grotesk", "IBM Plex Sans Arabic", "Cairo", sans-serif;

  /* قيم OKLCH بدون غلاف oklch() (قنوات مجرّدة L C H) عمدًا — حتى يعمل
     نمط `<alpha-value>` في theme.extend.colors (config/tailwind.config.js)
     ويصبح `bg-primary/90` وأخواتها يعملان فعليًا. كل استخدام مباشر لأي
     من هذه المتغيرات في CSS خام (هنا أو في أي ملف آخر) يجب أن يُغلَّف بـ
     oklch(var(--x)) دائمًا. */
  --background: 0.978 0.005 250;
  --foreground: 0.21 0.04 258;
  --card: 1 0 0;
  --card-foreground: 0.21 0.04 258;
  --popover: 1 0 0;
  --popover-foreground: 0.21 0.04 258;
  --primary: 0.42 0.11 254;
  --primary-foreground: 0.99 0.005 250;
  --primary-soft: 0.94 0.028 254;
  --secondary: 0.955 0.01 250;
  --secondary-foreground: 0.3 0.05 258;
  --muted: 0.958 0.008 250;
  --muted-foreground: 0.53 0.03 254;
  --accent: 0.93 0.03 254;
  --accent-foreground: 0.32 0.07 254;
  --destructive: 0.56 0.2 25;
  --destructive-foreground: 0.99 0 0;
  --success: 0.58 0.13 158;
  --success-foreground: 0.99 0 0;
  --warning: 0.75 0.14 78;
  --warning-foreground: 0.24 0.05 60;
  --gold: 0.72 0.12 85;
  --gold-foreground: 0.24 0.05 60;
  --border: 0.9 0.012 252;
  --input: 0.9 0.012 252;
  --ring: 0.42 0.11 254;
  --sidebar: 0.19 0.045 258;
  --sidebar-foreground: 0.86 0.02 252;
  --sidebar-accent: 0.28 0.06 256;
  --sidebar-accent-foreground: 0.99 0.005 250;
  --sidebar-border: 0.28 0.05 258;
  --chart-1: 0.42 0.11 254;
  --chart-2: 0.62 0.1 230;
  --chart-3: 0.72 0.12 85;
  --chart-4: 0.58 0.13 158;
  --chart-5: 0.56 0.13 300;

  --shadow-card: 0 1px 2px oklch(0.21 0.04 258 / 0.06), 0 8px 24px -16px oklch(0.21 0.04 258 / 0.25);
}

.dark {
  --background: 0.16 0.03 258;
  --foreground: 0.95 0.01 250;
  --card: 0.21 0.04 258;
  --card-foreground: 0.95 0.01 250;
  --popover: 0.21 0.04 258;
  --popover-foreground: 0.95 0.01 250;
  --primary: 0.66 0.12 250;
  --primary-foreground: 0.15 0.03 258;
  --primary-soft: 0.28 0.06 256;
  --secondary: 0.26 0.04 258;
  --secondary-foreground: 0.95 0.01 250;
  --muted: 0.26 0.04 258;
  --muted-foreground: 0.72 0.02 252;
  --accent: 0.3 0.05 256;
  --accent-foreground: 0.95 0.01 250;
  /* --border/--input كانت أصلاً أبيض شفاف بنسبة 12%/16% فوق خلفية داكنة؛
     بما أن القنوات هنا مجرّدة بدون ألفا، نقرّبها بلون رمادي داكن معتم
     مكافئ بصريًا (الوضع الداكن غير مفعّل حاليًا في أي مكان بالتطبيق). */
  --border: 0.28 0.02 258;
  --input: 0.32 0.02 258;
  --sidebar: 0.14 0.03 258;
  --sidebar-border: 0.26 0.02 258;
}

@layer base {
  * {
    border-color: oklch(var(--border));
  }

  body {
    background-color: oklch(var(--background));
    color: oklch(var(--foreground));
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  [dir="rtl"] {
    letter-spacing: 0;
  }
}

@layer components {
  /* ── Redesign utility classes (v4 @utility → v3 components) ── */
  .card-surface {
    background-color: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }

  .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    direction: ltr;
    unicode-bidi: isolate;
  }

  .display {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
  }

  .page-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid oklch(var(--border));
    background: linear-gradient(180deg, oklch(var(--card)), color-mix(in oklab, var(--page-accent) 3%, oklch(var(--card))));
    box-shadow: var(--shadow-card);
  }

  .accent-rail {
    border-inline-start: 2px solid color-mix(in oklab, var(--page-accent) 60%, transparent);
  }

  .stat-tile {
    border-radius: var(--radius-lg);
    border: 1px solid oklch(var(--border));
    background: color-mix(in oklab, var(--page-accent) 3.5%, oklch(var(--card)));
    padding: 0.875rem 1rem;
  }

  /* Sidebar accordion sections: <details name="sidebar-section"> gives
     exclusive-open-one-at-a-time behavior natively, no JS needed. */
  .sidebar-accordion > summary {
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-accordion > summary::-webkit-details-marker,
  .sidebar-accordion > summary::marker {
    display: none;
    content: "";
  }
  .sidebar-accordion[open] > summary .sidebar-accordion-chevron {
    transform: rotate(180deg);
  }
}

/* ── Page accents (restrained, corporate) ───────────────────── */
[data-accent] {
  --page-accent: oklch(var(--primary));
  --page-accent-soft: oklch(var(--primary-soft));
}
[data-accent="gold"] {
  --page-accent: oklch(0.52 0.06 78);
  --page-accent-soft: oklch(0.962 0.018 78);
}
[data-accent="emerald"] {
  --page-accent: oklch(0.48 0.06 178);
  --page-accent-soft: oklch(0.962 0.016 178);
}
[data-accent="rose"] {
  --page-accent: oklch(0.5 0.07 22);
  --page-accent-soft: oklch(0.962 0.016 22);
}
[data-accent="violet"] {
  --page-accent: oklch(0.47 0.06 290);
  --page-accent-soft: oklch(0.962 0.016 290);
}
[data-accent="amber"] {
  --page-accent: oklch(0.52 0.06 60);
  --page-accent-soft: oklch(0.962 0.018 60);
}
[data-accent="teal"] {
  --page-accent: oklch(0.48 0.05 220);
  --page-accent-soft: oklch(0.962 0.014 220);
}

@layer components {
  .input-text {
    @apply h-9 w-full rounded-md border border-input bg-card px-3 py-1 text-sm text-foreground placeholder:text-muted-foreground transition-colors;
    @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring;
    @apply read-only:bg-muted/60 read-only:text-muted-foreground read-only:cursor-default;
    @apply disabled:bg-muted/60 disabled:text-muted-foreground disabled:cursor-not-allowed;
  }

  /* Textareas share .input-text but must not be squashed to the fixed h-9
     single-line height — the accounts form (the reference) has none, so
     there was no precedent to follow here. */
  textarea.input-text {
    height: auto;
    min-height: 5rem;
  }

  /* Read-only totals-summary fields: still real form inputs (their value
     must post with the form), styled to read as a plain figure at the end
     of a receipt-style dt/dd row instead of an editable-looking box, so a
     totals panel doesn't look like an items-entry table. Font weight is
     intentionally left unset so the grand-total row's own font-semibold
     inherits down into it. */
  .stat-value-input {
    @apply inline-block h-auto w-24 border-0 bg-transparent p-0 text-end text-sm text-muted-foreground;
    @apply focus-visible:outline-none;
  }

  /* Grand-total row tint: page-accent is already a full oklch(...) value
     (see [data-accent] below), so it must NOT be re-wrapped in oklch(). */
  .totals-grand-row {
    background-color: color-mix(in oklab, var(--page-accent) 7%, transparent);
  }

  /* Sales/credit-sale item-entry tables: every field column gets enough
     room to actually type in, and header labels stay on one line instead
     of wrapping into a tall, unreadable stack. Excludes hidden inputs so
     cells that only carry hidden data (posted with the form, not meant to
     occupy a column) don't get forced open into a blank visible column. */
  table.items-table td:has(input:not([type="hidden"])),
  table.items-table td:has(select),
  table.items-table td:has(textarea) {
    min-width: 130px;
  }

  table.items-table th,
  table.items-table td {
    white-space: nowrap;
  }

  table.items-table td:has(textarea) {
    white-space: normal;
  }

  /* Gemstone sub-fields (item, weight, count, unit price, total) read as
     one related cluster instead of five more skinny, unrelated columns. */
  table.items-table .gemstone-group-header,
  table.items-table .gemstone-select,
  table.items-table .td_gemstone,
  table.items-table .head_gemstone {
    background-color: color-mix(in oklab, var(--page-accent) 6%, oklch(var(--card)));
  }

  table.items-table .gemstone-group-header,
  table.items-table .gemstone-select {
    border-inline-start: 2px solid color-mix(in oklab, var(--page-accent) 45%, transparent);
  }

  .btn-blue {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded
  }

  .btn-blue:hover {
    @apply bg-blue-700 cursor-pointer
  }

  .btn-blue:focus {
    @apply ring-2 ring-blue-500 ring-offset-2
  }

  .btn-blue:disabled {
    @apply bg-gray-500
  }

  .link-blue {
    @apply inline-block align-baseline font-bold text-sm text-blue-500
  }

  .link-blue:hover {
    @apply text-blue-700
  }

  /* Style a pagination item in pagy partial. */
  .page {
    @apply px-2 py-1
  }

  /* Form required fields star style */

  form abbr {
    @apply text-red-600 no-underline
  }

  .sidebar{
    transition:all .4s ease-in-out;
  }

  .rounded-error-border .field_with_errors {
    @apply p-2 border-2 border-red-600 rounded
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.dropdown-backdrop {
  @apply fixed inset-0 bg-black bg-opacity-70  z-50;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.toggle-btn {
  cursor: pointer;
  margin: 1rem auto;
  position: relative;
  width: 40px;
  height: 25px;
  border-radius: 25px;
  outline: none;
  background-color: #ccc;
  -webkit-appearance: none;
}
.toggle-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
  background-color: white;
  transition: left .3s;
}

.toggle-btn:checked {
  @apply bg-blue-500
}

.toggle-btn:checked::after {
  left: 70%;
}

.autocomplete {
  @apply relative inline-block;
}

.autocomplete-items {
  position: absolute;
  border-bottom: 0;
  border-top: 0;
  z-index: 50;
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 0.75rem;
  cursor: pointer;
  background-color: white;
  border-radius: 1rem;
  border-bottom: 1px solid #a0aec0;
}

.autocomplete-items div:hover {
  background-color: #f7fafc;
}

.autocomplete-active {
  background-color: #4299e1;
  color: white;
}
.tt{
    color: red;
}
/* SlimSelect */
@import url("https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.10.0/slimselect.min.css");

/* Match SlimSelect's generated markup to the .input-text design system
   (its default CSS ships unstyled-looking box shadows/colors that never
   matched the rest of the app). */
.ss-main {
  min-height: 2.25rem;
  border-radius: 0.375rem;
  border: 1px solid oklch(var(--input));
  background-color: oklch(var(--background));
  box-shadow: 0 1px 2px 0 oklch(0.21 0.04 258 / 0.05);
  padding-inline: 0.5rem;
}

.ss-main.ss-open-above,
.ss-main.ss-open-below {
  border-color: oklch(var(--ring));
  box-shadow: 0 0 0 1px oklch(var(--ring));
}

.ss-main .ss-values .ss-single,
.ss-main .ss-values .ss-multi .ss-value .ss-value-text {
  color: oklch(var(--foreground));
  font-size: 0.875rem;
}

.ss-main .ss-values .ss-placeholder {
  color: oklch(var(--muted-foreground));
  font-size: 0.875rem;
}

.ss-main .ss-values .ss-multi .ss-value {
  background-color: oklch(var(--primary-soft));
  border-radius: 0.25rem;
}

.ss-main .ss-values .ss-multi .ss-value .ss-value-delete {
  border-inline-start-color: oklch(var(--border));
}

.ss-main .ss-deselect svg,
.ss-main .ss-arrow svg {
  stroke: oklch(var(--muted-foreground));
}

.ss-content {
  border-radius: 0.375rem;
  border: 1px solid oklch(var(--border));
  box-shadow: var(--shadow-card);
}

.ss-content .ss-search input {
  border-radius: 0.375rem;
  border: 1px solid oklch(var(--input));
  font-size: 0.875rem;
}

.ss-content .ss-search input:focus {
  outline: none;
  box-shadow: 0 0 0 1px oklch(var(--ring));
  border-color: oklch(var(--ring));
}

.ss-content .ss-list .ss-option {
  font-size: 0.875rem;
  color: oklch(var(--foreground));
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled):hover {
  background-color: oklch(var(--accent));
  color: oklch(var(--accent-foreground));
}

.ss-content .ss-list .ss-option.ss-disabled {
  color: oklch(var(--muted-foreground));
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Base font settings */
:root {
    font-family: 'Cairo', 'DM Sans', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  /* Ensure proper font loading */
  html[dir="rtl"] {
    font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  html[dir="ltr"] {
    font-family: 'Cairo', 'DM Sans', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }