/* ==========================================================================
   OORKANAKU Village Governance ERP - Theme System
   Modes, Gradients, Utilities
   ========================================================================== */

/* ── Light Mode (Default) ── */
body {
  background-color: var(--ok-bg-secondary);
  color: var(--ok-text-primary);
  transition: background-color var(--ok-transition-base), color var(--ok-transition-base);
}

/* ── Dark Mode ── */
.dark-mode {
  color-scheme: dark;
}

.dark-mode img,
.dark-mode svg {
  filter: brightness(0.9);
}

/* ── Theme Toggle ── */
.ok-theme-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: var(--ok-radius-full);
  background: var(--ok-gray-300);
  cursor: pointer;
  transition: background var(--ok-transition-base);
  border: none;
  outline: none;
}

.dark-mode .ok-theme-toggle {
  background: var(--ok-saffron);
}

.ok-theme-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--ok-radius-full);
  background: var(--ok-white);
  box-shadow: var(--ok-shadow-sm);
  transition: transform var(--ok-transition-base);
}

.dark-mode .ok-theme-toggle::after {
  transform: translateX(22px);
}

.ok-theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--ok-saffron-light);
}

/* ── Glassmorphism Utilities ── */
.ok-glass {
  background: var(--ok-glass-bg);
  -webkit-backdrop-filter: blur(var(--ok-glass-blur)) saturate(var(--ok-glass-saturate));
  backdrop-filter: blur(var(--ok-glass-blur)) saturate(var(--ok-glass-saturate));
  border: 1px solid var(--ok-glass-border);
}

.ok-glass-card {
  background: var(--ok-glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--ok-glass-border);
  border-radius: var(--ok-radius-xl);
  box-shadow: var(--ok-shadow-glass);
}

.ok-glass-strong {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark-mode .ok-glass-strong {
  background: rgba(26, 26, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ok-glass-subtle {
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode .ok-glass-subtle {
  background: rgba(26, 26, 46, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Gradient Backgrounds ── */
.ok-gradient-saffron {
  background: linear-gradient(135deg, #FF6B00 0%, #E55A00 50%, #FF8533 100%);
}

.ok-gradient-gold {
  background: linear-gradient(135deg, #FFD700 0%, #DAA520 50%, #FFD700 100%);
}

.ok-gradient-temple {
  background: linear-gradient(135deg, #FF6B00 0%, #FFD700 50%, #FF6B00 100%);
}

.ok-gradient-village {
  background: linear-gradient(135deg, #2E7D32 0%, #1565C0 100%);
}

.ok-gradient-sacred {
  background: linear-gradient(135deg, #CC0000 0%, #800020 100%);
}

.ok-gradient-sky {
  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
}

.ok-gradient-warm {
  background: linear-gradient(135deg, #FF6B00 0%, #CC0000 100%);
}

.ok-gradient-cool {
  background: linear-gradient(135deg, #1565C0 0%, #2E7D32 100%);
}

.ok-gradient-dark {
  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
}

.ok-gradient-saffron-radial {
  background: radial-gradient(circle at 30% 30%, #FF8533, #FF6B00 50%, #E55A00);
}

/* ── Gradient Text ── */
.ok-text-gradient-saffron {
  background: linear-gradient(135deg, #FF6B00, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ok-text-gradient-temple {
  background: linear-gradient(135deg, #FF6B00, #FFD700, #FF6B00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ok-text-gradient-sacred {
  background: linear-gradient(135deg, #CC0000, #FF6B00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Text Utilities ── */
.ok-text-xs           { font-size: var(--ok-text-xs); }
.ok-text-sm           { font-size: var(--ok-text-sm); }
.ok-text-base         { font-size: var(--ok-text-base); }
.ok-text-md           { font-size: var(--ok-text-md); }
.ok-text-lg           { font-size: var(--ok-text-lg); }
.ok-text-xl           { font-size: var(--ok-text-xl); }
.ok-text-2xl          { font-size: var(--ok-text-2xl); }
.ok-text-3xl          { font-size: var(--ok-text-3xl); }
.ok-text-4xl          { font-size: var(--ok-text-4xl); }
.ok-text-5xl          { font-size: var(--ok-text-5xl); }

.ok-text-light        { font-weight: var(--ok-font-light); }
.ok-text-normal       { font-weight: var(--ok-font-normal); }
.ok-text-medium       { font-weight: var(--ok-font-medium); }
.ok-text-semibold     { font-weight: var(--ok-font-semibold); }
.ok-text-bold         { font-weight: var(--ok-font-bold); }
.ok-text-extrabold    { font-weight: var(--ok-font-extrabold); }

.ok-text-center       { text-align: center; }
.ok-text-left         { text-align: left; }
.ok-text-right        { text-align: right; }

.ok-text-primary      { color: var(--ok-text-primary); }
.ok-text-secondary    { color: var(--ok-text-secondary); }
.ok-text-tertiary     { color: var(--ok-text-tertiary); }
.ok-text-muted        { color: var(--ok-text-muted); }
.ok-text-inverse      { color: var(--ok-text-inverse); }
.ok-text-saffron      { color: var(--ok-saffron); }
.ok-text-gold         { color: var(--ok-temple-gold); }
.ok-text-red          { color: var(--ok-sacred-red); }
.ok-text-green        { color: var(--ok-village-green); }
.ok-text-blue         { color: var(--ok-sky-blue); }
.ok-text-white        { color: var(--ok-white); }

.ok-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ok-text-wrap         { white-space: normal; }
.ok-text-nowrap       { white-space: nowrap; }
.ok-text-uppercase    { text-transform: uppercase; }
.ok-text-lowercase    { text-transform: lowercase; }
.ok-text-capitalize   { text-transform: capitalize; }

.ok-font-heading      { font-family: var(--ok-font-heading); }
.ok-font-mono         { font-family: var(--ok-font-mono); }
.ok-font-tamil        { font-family: var(--ok-font-tamil); }

.ok-leading-none      { line-height: var(--ok-leading-none); }
.ok-leading-tight     { line-height: var(--ok-leading-tight); }
.ok-leading-snug      { line-height: var(--ok-leading-snug); }
.ok-leading-normal    { line-height: var(--ok-leading-normal); }
.ok-leading-relaxed   { line-height: var(--ok-leading-relaxed); }

/* ── Background Utilities ── */
.ok-bg-primary        { background-color: var(--ok-bg-primary); }
.ok-bg-secondary      { background-color: var(--ok-bg-secondary); }
.ok-bg-tertiary       { background-color: var(--ok-bg-tertiary); }
.ok-bg-card           { background-color: var(--ok-bg-card); }
.ok-bg-saffron        { background-color: var(--ok-saffron); }
.ok-bg-gold           { background-color: var(--ok-temple-gold); }
.ok-bg-red            { background-color: var(--ok-sacred-red); }
.ok-bg-maroon         { background-color: var(--ok-deep-maroon); }
.ok-bg-green          { background-color: var(--ok-village-green); }
.ok-bg-blue           { background-color: var(--ok-sky-blue); }
.ok-bg-white          { background-color: var(--ok-white); }
.ok-bg-black          { background-color: var(--ok-black); }
.ok-bg-transparent    { background-color: transparent; }

.ok-bg-saffron-light  { background-color: var(--ok-saffron-light); }
.ok-bg-gold-light     { background-color: var(--ok-temple-gold-light); }
.ok-bg-red-light      { background-color: var(--ok-sacred-red-light); }
.ok-bg-green-light    { background-color: var(--ok-village-green-light); }
.ok-bg-blue-light     { background-color: var(--ok-sky-blue-light); }

/* ── Border Utilities ── */
.ok-border            { border: 1px solid var(--ok-border-primary); }
.ok-border-0           { border: 0; }
.ok-border-top         { border-top: 1px solid var(--ok-border-primary); }
.ok-border-right       { border-right: 1px solid var(--ok-border-primary); }
.ok-border-bottom     { border-bottom: 1px solid var(--ok-border-primary); }
.ok-border-left       { border-left: 1px solid var(--ok-border-primary); }

.ok-border-saffron    { border-color: var(--ok-saffron); }
.ok-border-gold       { border-color: var(--ok-temple-gold); }
.ok-border-red        { border-color: var(--ok-sacred-red); }
.ok-border-green      { border-color: var(--ok-village-green); }
.ok-border-blue       { border-color: var(--ok-sky-blue); }

.ok-rounded-none      { border-radius: var(--ok-radius-none); }
.ok-rounded-sm        { border-radius: var(--ok-radius-sm); }
.ok-rounded-md        { border-radius: var(--ok-radius-md); }
.ok-rounded-lg        { border-radius: var(--ok-radius-lg); }
.ok-rounded-xl        { border-radius: var(--ok-radius-xl); }
.ok-rounded-2xl       { border-radius: var(--ok-radius-2xl); }
.ok-rounded-full      { border-radius: var(--ok-radius-full); }

.ok-border-t-0        { border-top: 0; }
.ok-border-r-0        { border-right: 0; }
.ok-border-b-0        { border-bottom: 0; }
.ok-border-l-0        { border-left: 0; }

/* ── Display Utilities ── */
.ok-hidden            { display: none; }
.ok-block             { display: block; }
.ok-inline-block      { display: inline-block; }
.ok-inline            { display: inline; }
.ok-flex              { display: flex; }
.ok-inline-flex       { display: inline-flex; }
.ok-grid              { display: grid; }

/* ── Flexbox Utilities ── */
.ok-flex-row          { flex-direction: row; }
.ok-flex-col          { flex-direction: column; }
.ok-flex-row-reverse  { flex-direction: row-reverse; }
.ok-flex-col-reverse  { flex-direction: column-reverse; }

.ok-flex-wrap         { flex-wrap: wrap; }
.ok-flex-nowrap       { flex-wrap: nowrap; }
.ok-flex-wrap-reverse { flex-wrap: wrap-reverse; }

.ok-items-start       { align-items: flex-start; }
.ok-items-center      { align-items: center; }
.ok-items-end         { align-items: flex-end; }
.ok-items-stretch     { align-items: stretch; }
.ok-items-baseline    { align-items: baseline; }

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

.ok-self-start        { align-self: flex-start; }
.ok-self-center       { align-self: center; }
.ok-self-end          { align-self: flex-end; }
.ok-self-stretch      { align-self: stretch; }

.ok-flex-1            { flex: 1 1 0%; }
.ok-flex-auto         { flex: 1 1 auto; }
.ok-flex-initial      { flex: 0 1 auto; }
.ok-flex-none         { flex: none; }
.ok-flex-grow         { flex-grow: 1; }
.ok-flex-shrink-0     { flex-shrink: 0; }

/* ── Gap Utilities ── */
.ok-gap-0             { gap: var(--ok-space-0); }
.ok-gap-1             { gap: var(--ok-space-1); }
.ok-gap-2             { gap: var(--ok-space-2); }
.ok-gap-3             { gap: var(--ok-space-3); }
.ok-gap-4             { gap: var(--ok-space-4); }
.ok-gap-5             { gap: var(--ok-space-5); }
.ok-gap-6             { gap: var(--ok-space-6); }
.ok-gap-8             { gap: var(--ok-space-8); }

/* ── Margin Utilities ── */
.ok-m-0               { margin: var(--ok-space-0); }
.ok-m-1               { margin: var(--ok-space-1); }
.ok-m-2               { margin: var(--ok-space-2); }
.ok-m-3               { margin: var(--ok-space-3); }
.ok-m-4               { margin: var(--ok-space-4); }
.ok-m-auto            { margin: auto; }
.ok-mx-auto           { margin-left: auto; margin-right: auto; }

.ok-mt-0              { margin-top: var(--ok-space-0); }
.ok-mt-1              { margin-top: var(--ok-space-1); }
.ok-mt-2              { margin-top: var(--ok-space-2); }
.ok-mt-3              { margin-top: var(--ok-space-3); }
.ok-mt-4              { margin-top: var(--ok-space-4); }
.ok-mt-6              { margin-top: var(--ok-space-6); }
.ok-mt-8              { margin-top: var(--ok-space-8); }

.ok-mb-0              { margin-bottom: var(--ok-space-0); }
.ok-mb-1              { margin-bottom: var(--ok-space-1); }
.ok-mb-2              { margin-bottom: var(--ok-space-2); }
.ok-mb-3              { margin-bottom: var(--ok-space-3); }
.ok-mb-4              { margin-bottom: var(--ok-space-4); }
.ok-mb-6              { margin-bottom: var(--ok-space-6); }
.ok-mb-8              { margin-bottom: var(--ok-space-8); }

/* ── Padding Utilities ── */
.ok-p-0               { padding: var(--ok-space-0); }
.ok-p-1               { padding: var(--ok-space-1); }
.ok-p-2               { padding: var(--ok-space-2); }
.ok-p-3               { padding: var(--ok-space-3); }
.ok-p-4               { padding: var(--ok-space-4); }
.ok-p-5               { padding: var(--ok-space-5); }
.ok-p-6               { padding: var(--ok-space-6); }
.ok-p-8               { padding: var(--ok-space-8); }

.ok-px-2              { padding-left: var(--ok-space-2); padding-right: var(--ok-space-2); }
.ok-px-3              { padding-left: var(--ok-space-3); padding-right: var(--ok-space-3); }
.ok-px-4              { padding-left: var(--ok-space-4); padding-right: var(--ok-space-4); }
.ok-px-6              { padding-left: var(--ok-space-6); padding-right: var(--ok-space-6); }
.ok-px-8              { padding-left: var(--ok-space-8); padding-right: var(--ok-space-8); }

.ok-py-2              { padding-top: var(--ok-space-2); padding-bottom: var(--ok-space-2); }
.ok-py-3              { padding-top: var(--ok-space-3); padding-bottom: var(--ok-space-3); }
.ok-py-4              { padding-top: var(--ok-space-4); padding-bottom: var(--ok-space-4); }
.ok-py-6              { padding-top: var(--ok-space-6); padding-bottom: var(--ok-space-6); }
.ok-py-8              { padding-top: var(--ok-space-8); padding-bottom: var(--ok-space-8); }

/* ── Width / Height Utilities ── */
.ok-w-full            { width: 100%; }
.ok-w-auto            { width: auto; }
.ok-w-screen          { width: 100vw; }
.ok-w-fit             { width: fit-content; }
.ok-h-full            { height: 100%; }
.ok-h-auto            { height: auto; }
.ok-h-screen          { height: 100vh; }
.ok-min-h-screen      { min-height: 100vh; }

/* ── Overflow Utilities ── */
.ok-overflow-hidden   { overflow: hidden; }
.ok-overflow-auto     { overflow: auto; }
.ok-overflow-x-auto   { overflow-x: auto; }
.ok-overflow-y-auto   { overflow-y: auto; }
.ok-overflow-scroll   { overflow: scroll; }

/* ── Position Utilities ── */
.ok-relative          { position: relative; }
.ok-absolute          { position: absolute; }
.ok-fixed             { position: fixed; }
.ok-sticky            { position: sticky; top: 0; }

.ok-inset-0           { top: 0; right: 0; bottom: 0; left: 0; }
.ok-top-0             { top: 0; }
.ok-right-0           { right: 0; }
.ok-bottom-0          { bottom: 0; }
.ok-left-0            { left: 0; }

/* ── Shadow Utilities ── */
.ok-shadow-none       { box-shadow: none; }
.ok-shadow-sm         { box-shadow: var(--ok-shadow-sm); }
.ok-shadow-md         { box-shadow: var(--ok-shadow-md); }
.ok-shadow-lg         { box-shadow: var(--ok-shadow-lg); }
.ok-shadow-xl         { box-shadow: var(--ok-shadow-xl); }
.ok-shadow-card       { box-shadow: var(--ok-shadow-card); }

/* ── Cursor Utilities ── */
.ok-cursor-pointer    { cursor: pointer; }
.ok-cursor-default    { cursor: default; }
.ok-cursor-not-allowed { cursor: not-allowed; }
.ok-cursor-grab       { cursor: grab; }

/* ── Opacity Utilities ── */
.ok-opacity-0         { opacity: 0; }
.ok-opacity-25        { opacity: 0.25; }
.ok-opacity-50        { opacity: 0.5; }
.ok-opacity-75        { opacity: 0.75; }
.ok-opacity-100       { opacity: 1; }

/* ── Selection ── */
.ok-selection {
  background: var(--ok-saffron);
  color: var(--ok-white);
}

/* ── Scrollbar Styling ── */
.ok-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ok-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.ok-scrollbar::-webkit-scrollbar-thumb {
  background: var(--ok-gray-400);
  border-radius: var(--ok-radius-full);
}

.ok-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ok-gray-500);
}

.dark-mode .ok-scrollbar::-webkit-scrollbar-thumb {
  background: var(--ok-gray-700);
}

.dark-mode .ok-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ok-gray-600);
}

/* ── Animation Utilities ── */
.ok-animate-fade-in       { animation: okFadeIn var(--ok-transition-base) both; }
.ok-animate-fade-in-up    { animation: okFadeInUp var(--ok-transition-slow) both; }
.ok-animate-fade-in-down  { animation: okFadeInDown var(--ok-transition-slow) both; }
.ok-animate-slide-in-left { animation: okSlideInLeft var(--ok-transition-slow) both; }
.ok-animate-slide-in-right{ animation: okSlideInRight var(--ok-transition-slow) both; }
.ok-animate-scale-in      { animation: okScaleIn var(--ok-transition-base) both; }
.ok-animate-spin          { animation: okSpin 1s linear infinite; }
.ok-animate-pulse         { animation: okPulse 2s ease-in-out infinite; }
.ok-animate-bounce        { animation: okBounce 1s ease infinite; }
.ok-animate-shake         { animation: okShake 0.5s ease; }

.ok-animation-delay-100   { animation-delay: 100ms; }
.ok-animation-delay-200   { animation-delay: 200ms; }
.ok-animation-delay-300   { animation-delay: 300ms; }
.ok-animation-delay-500   { animation-delay: 500ms; }
.ok-animation-delay-700   { animation-delay: 700ms; }
.ok-animation-delay-1000  { animation-delay: 1000ms; }

.ok-animation-fill-both   { animation-fill-mode: both; }

/* ── Screen Reader Only ── */
.ok-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Print Utilities ── */
@media print {
  .ok-no-print          { display: none !important; }
  .ok-print-only        { display: block !important; }
  .ok-print-break-avoid { break-inside: avoid; }
  .ok-print-break-before{ break-before: page; }
}