@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
/**
 * Complete INA Digital Design System CSS Bundle
 * 
 * This is the main entrypoint for CDN usage (similar to Bootstrap).
 * It includes all components, base styles, and colors.
 * 
 * Usage (CDN):
 * <link rel="stylesheet" href="https://cdn.example.com/@idds/styles/dist/index.css">
 * 
 * Or import in your CSS:
 * @import '@idds/styles';
 */
/* Import base styles (colors + reset) */
/* Base styles for @idds/styles */
/* This file contains colors and reset styles */
:root {
  /* Neutral Colors */
  --ina-neutral-25: #ffffff;
  --ina-neutral-50: #f8f8f7;
  --ina-neutral-100: #f2f2f2;
  --ina-neutral-200: #e5e5e5;
  --ina-neutral-300: #d4d4d4;
  --ina-neutral-400: #a3a3a3;
  --ina-neutral-500: #737373;
  --ina-neutral-600: #525252;
  --ina-neutral-700: #404040;
  --ina-neutral-800: #1f1f1f;
  --ina-neutral-900: #141414;
  --ina-neutral-1000: #050505;

  --ina-primary-25: #ffffff;
  --ina-primary-50: #f8f8f7;
  --ina-primary-100: #f5f5f5;
  --ina-primary-200: #e5e5e5;
  --ina-primary-300: #d4d4d4;
  --ina-primary-400: #a3a3a3;
  --ina-primary-500: #737373;
  --ina-primary-600: #525252;
  --ina-primary-700: #404040;
  --ina-primary-800: #1f1f1f;
  --ina-primary-900: #141414;
  --ina-primary-primary: #141414;

  --ina-secondary-25: #f2f9fd;
  --ina-secondary-50: #e3f0fb;
  --ina-secondary-100: #c1e3f6;
  --ina-secondary-200: #8accef;
  --ina-secondary-300: #4cb2e4;
  --ina-secondary-400: #269dd8;
  --ina-secondary-500: #177ab2;
  --ina-secondary-600: #146190;
  --ina-secondary-700: #145378;
  --ina-secondary-800: #164564;
  --ina-secondary-900: #0f2d42;

  /* Blue Colors */
  --ina-blue-50: #fafcff;
  --ina-blue-100: #ecf3fe;
  --ina-blue-200: #dceafe;
  --ina-blue-300: #84b4fb;
  --ina-blue-400: #4d93fc;
  --ina-blue-500: #0968f6;
  --ina-blue-600: #0049b8;
  --ina-blue-700: #002a69;
  --ina-blue-800: #0e192a;
  --ina-blue-900: #070e17;

  /* Cyan Colors */
  --ina-cyan-50: #fafeff;
  --ina-cyan-100: #ebfaff;
  --ina-cyan-200: #d2f3fe;
  --ina-cyan-300: #83defc;
  --ina-cyan-400: #51d0fb;
  --ina-cyan-500: #09bbf6;
  --ina-cyan-600: #008bb9;
  --ina-cyan-700: #00506b;
  --ina-cyan-800: #0a3442;
  --ina-cyan-900: #032530;

  /* Teal Colors */
  --ina-teal-50: #faffff;
  --ina-teal-100: #effbfb;
  --ina-teal-200: #d7f4f6;
  --ina-teal-300: #8edfe5;
  --ina-teal-400: #44ccd5;
  --ina-teal-500: #1bbfca;
  --ina-teal-600: #006f93;
  --ina-teal-700: #07465a;
  --ina-teal-800: #04252f;
  --ina-teal-900: #02161d;

  /* Green Colors */
  --ina-green-50: #fafffa;
  --ina-green-100: #edfded;
  --ina-green-200: #e0fae0;
  --ina-green-300: #a6f0a5;
  --ina-green-400: #4ce160;
  --ina-green-500: #3cc14e;
  --ina-green-600: #288034;
  --ina-green-700: #1b561a;
  --ina-green-800: #0c310d;
  --ina-green-900: #021d06;

  /* Lime Colors */
  --ina-lime-50: #fdfffa;
  --ina-lime-100: #f8fded;
  --ina-lime-200: #f2fcdf;
  --ina-lime-300: #ddf6aa;
  --ina-lime-400: #bbed56;
  --ina-lime-500: #90c821;
  --ina-lime-600: #5b7d17;
  --ina-lime-700: #3b5110;
  --ina-lime-800: #202d06;
  --ina-lime-900: #141d02;

  /* Yellow Colors */
  --ina-yellow-50: #fffefa;
  --ina-yellow-100: #fff9eb;
  --ina-yellow-200: #fff8d5;
  --ina-yellow-300: #ffe58a;
  --ina-yellow-400: #ffcc14;
  --ina-yellow-500: #eebb04;
  --ina-yellow-600: #855f00;
  --ina-yellow-700: #553b06;
  --ina-yellow-800: #312102;
  --ina-yellow-900: #1c1402;

  /* Orange Colors */
  --ina-orange-50: #fffcfa;
  --ina-orange-100: #fff5eb;
  --ina-orange-200: #ffead3;
  --ina-orange-300: #ffc382;
  --ina-orange-400: #ff8806;
  --ina-orange-500: #ec7303;
  --ina-orange-600: #c15100;
  --ina-orange-700: #562501;
  --ina-orange-800: #2f1604;
  --ina-orange-900: #170b02;

  /* Coral Colors */
  --ina-coral-50: #fffbfa;
  --ina-coral-100: #ffefeb;
  --ina-coral-200: #ffe1d7;
  --ina-coral-300: #ffa78a;
  --ina-coral-400: #ff6a38;
  --ina-coral-500: #f3511b;
  --ina-coral-600: #d03706;
  --ina-coral-700: #5e1d08;
  --ina-coral-800: #2f0e04;
  --ina-coral-900: #1d0802;

  /* Red Colors */
  --ina-red-50: #fffafa;
  --ina-red-100: #fdeded;
  --ina-red-200: #ffe0e0;
  --ina-red-300: #ffa0a0;
  --ina-red-400: #ff5c5c;
  --ina-red-500: #f02d2d;
  --ina-red-600: #d50b0b;
  --ina-red-700: #570303;
  --ina-red-800: #2a0303;
  --ina-red-900: #1d0202;

  /* Pink Colors */
  --ina-pink-50: #fff5fa;
  --ina-pink-100: #fdedf5;
  --ina-pink-200: #fcdcec;
  --ina-pink-300: #f79cc8;
  --ina-pink-400: #f155a0;
  --ina-pink-500: #e9358b;
  --ina-pink-600: #a51359;
  --ina-pink-700: #4b112d;
  --ina-pink-800: #36061d;
  --ina-pink-900: #1d020f;

  /* Magenta Colors */
  --ina-magenta-50: #fefaff;
  --ina-magenta-100: #fbebff;
  --ina-magenta-200: #f5d2fe;
  --ina-magenta-300: #e483fc;
  --ina-magenta-400: #d951fb;
  --ina-magenta-500: #c709f6;
  --ina-magenta-600: #9400b9;
  --ina-magenta-700: #56006b;
  --ina-magenta-800: #370a42;
  --ina-magenta-900: #270330;

  /* Violet Colors */
  --ina-violet-50: #fbfaff;
  --ina-violet-100: #f7f6fe;
  --ina-violet-200: #e2ddfd;
  --ina-violet-300: #ad9efa;
  --ina-violet-400: #8770ff;
  --ina-violet-500: #583aee;
  --ina-violet-600: #3b1fc6;
  --ina-violet-700: #271a68;
  --ina-violet-800: #140f2e;
  --ina-violet-900: #06021d;

  /* Purple Colors */
  --ina-purple-50: #fdfaff;
  --ina-purple-100: #f7ebff;
  --ina-purple-200: #ecd2fe;
  --ina-purple-300: #cc83fc;
  --ina-purple-400: #b751fb;
  --ina-purple-500: #9709f6;
  --ina-purple-600: #6f00b9;
  --ina-purple-700: #40006b;
  --ina-purple-800: #2c0a42;
  --ina-purple-900: #1e0330;

  /* Lilac Colors */
  --ina-lilac-50: #fdfaff;
  --ina-lilac-100: #faf5fe;
  --ina-lilac-200: #efddfd;
  --ina-lilac-300: #cc9ef0;
  --ina-lilac-400: #b56bf0;
  --ina-lilac-500: #8935cb;
  --ina-lilac-600: #631f99;
  --ina-lilac-700: #3e135f;
  --ina-lilac-800: #1c042f;
  --ina-lilac-900: #11021d;

  /* Indigo Colors */
  --ina-indigo-50: #fafdff;
  --ina-indigo-100: #ebf7ff;
  --ina-indigo-200: #d3effe;
  --ina-indigo-300: #80d0fd;
  --ina-indigo-400: #0aa7ff;
  --ina-indigo-500: #0099f0;
  --ina-indigo-600: #0364ab;
  --ina-indigo-700: #003c66;
  --ina-indigo-800: #01243d;
  --ina-indigo-900: #02121d;

  /* overlay */
  --ina-overlay: #1f1f1f7a;
}
:root {
  /* Font Sizes */
  --ina-font-3xs: 0.5rem; /* 8px */
  --ina-font-2xs: 0.625rem; /* 10px */
  --ina-font-xs: 0.75rem; /* 12px */
  --ina-font-sm: 0.875rem; /* 14px */
  --ina-font-base: 1rem; /* 16px */
  --ina-font-lg: 1.125rem; /* 18px */
  --ina-font-xl: 1.25rem; /* 20px */
  --ina-font-2xl: 1.5rem; /* 24px */
  --ina-font-3xl: 1.875rem; /* 30px */
  --ina-font-4xl: 2.25rem; /* 36px */

  /* Line Heights */
  --ina-line-height-xs: 1rem; /* 16px */
  --ina-line-height-sm: 1.25rem; /* 20px */
  --ina-line-height-base: 1.5rem; /* 24px */
  --ina-line-height-lg: 1.75rem; /* 28px */
  --ina-line-height-xl: 2rem; /* 32px */

  /* Font Weights */
  --ina-font-thin: 100;
  --ina-font-extralight: 200;
  --ina-font-light: 300;
  --ina-font-normal: 400;
  --ina-font-medium: 500;
  --ina-font-semibold: 600;
  --ina-font-bold: 700;
  --ina-font-extrabold: 800;
  --ina-font-black: 900;

  /* Spacing */
  --ina-spacing-0: 0rem; /* 0px */
  --ina-spacing-0-5: 0.125rem; /* 2px */
  --ina-spacing-1: 0.25rem; /* 4px */
  --ina-spacing-1-5: 0.375rem; /* 6px */
  --ina-spacing-2: 0.5rem; /* 8px */
  --ina-spacing-2-5: 0.625rem; /* 10px */
  --ina-spacing-3: 0.75rem; /* 12px */
  --ina-spacing-3-5: 0.875rem; /* 14px */
  --ina-spacing-4: 1rem; /* 16px */
  --ina-spacing-4-5: 1.125rem; /* 18px */
  --ina-spacing-5: 1.25rem; /* 20px */
  --ina-spacing-5-5: 1.375rem; /* 22px */
  --ina-spacing-6: 1.5rem; /* 24px */
  --ina-spacing-6-5: 1.625rem; /* 26px */
  --ina-spacing-7: 1.75rem; /* 28px */
  --ina-spacing-7-5: 1.875rem; /* 30px */
  --ina-spacing-8: 2rem; /* 32px */
  --ina-spacing-8-5: 2.125rem; /* 34px */
  --ina-spacing-9: 2.25rem; /* 36px */
  --ina-spacing-9-5: 2.375rem; /* 38px */
  --ina-spacing-10: 2.5rem; /* 40px */
  --ina-spacing-10-5: 2.625rem; /* 42px */
  --ina-spacing-11: 2.75rem; /* 44px */
  --ina-spacing-11-5: 2.875rem; /* 46px */
  --ina-spacing-12: 3rem; /* 48px */
  --ina-spacing-12-5: 3.125rem; /* 50px */
  --ina-spacing-13: 3.25rem; /* 52px */
  --ina-spacing-13-5: 3.375rem; /* 54px */
  --ina-spacing-14: 3.5rem; /* 56px */
  --ina-spacing-14-5: 3.625rem; /* 58px */
  --ina-spacing-15: 3.75rem; /* 60px */
  --ina-spacing-15-5: 3.875rem; /* 62px */
  --ina-spacing-16: 4rem; /* 64px */
  --ina-spacing-16-5: 4.125rem; /* 66px */
  --ina-spacing-17: 4.25rem; /* 68px */
  --ina-spacing-17-5: 4.375rem; /* 70px */
  --ina-spacing-18: 4.5rem; /* 72px */
  --ina-spacing-18-5: 4.625rem; /* 74px */
  --ina-spacing-19: 4.75rem; /* 76px */
  --ina-spacing-19-5: 4.875rem; /* 78px */
  --ina-spacing-20: 5rem; /* 80px */
  --ina-spacing-20-5: 5.125rem; /* 82px */
  --ina-spacing-21: 5.25rem; /* 84px */
  --ina-spacing-21-5: 5.375rem; /* 86px */
  --ina-spacing-22: 5.5rem; /* 88px */
  --ina-spacing-22-5: 5.625rem; /* 90px */
  --ina-spacing-23: 5.75rem; /* 92px */
  --ina-spacing-23-5: 5.875rem; /* 94px */
  --ina-spacing-24: 6rem; /* 96px */
  /* Border Radius */
  --ina-radius-sm: 0.125rem; /* 2px */
  --ina-radius-base: 0.25rem; /* 4px */
  --ina-radius-md: 0.375rem; /* 6px */
  --ina-radius-lg: 0.5rem; /* 8px */
  --ina-radius-xl: 0.75rem; /* 12px */
  --ina-radius-2xl: 1rem; /* 16px */
  --ina-radius-full: 9999px;

  /* Shadows */
  --ina-shadow-color: 0, 0, 0;
  --ina-shadow-sm: 0 1px 2px 0 rgba(var(--ina-shadow-color), 0.05);
  --ina-shadow-base:
    0 1px 3px 0 rgba(var(--ina-shadow-color), 0.1), 0 1px 2px -1px rgba(var(--ina-shadow-color), 0.1);
  --ina-shadow-md:
    0 4px 6px -1px rgba(var(--ina-shadow-color), 0.1), 0 2px 4px -2px rgba(var(--ina-shadow-color), 0.1);
  --ina-shadow-lg:
    0 10px 15px -3px rgba(var(--ina-shadow-color), 0.1), 0 4px 6px -4px rgba(var(--ina-shadow-color), 0.1);
  --ina-shadow-xl:
    0 20px 25px -5px rgba(var(--ina-shadow-color), 0.1), 0 8px 10px -6px rgba(var(--ina-shadow-color), 0.1);

  /* Transition */
  --ina-transition-fast: 150ms ease-in-out;
  --ina-transition-base: 200ms ease-in-out;
  --ina-transition-slow: 300ms ease-in-out;

  /* Breakpoints untuk responsive design */
  --ina-breakpoint-sm: 640px;
  --ina-breakpoint-md: 768px;
  --ina-breakpoint-lg: 1024px;
  --ina-breakpoint-xl: 1280px;
}
/* Import brand-specific theme files - MUST be at the top */
/* InaPas Theme - Passport & Immigration Services */
[data-brand='inapas'] {
  /* Primary Colors - Red/Coral theme (Figma InaPas) */
  --ina-primary-25: #fef2f2;
  --ina-primary-50: #f9dcdc;
  --ina-primary-100: #f9cdc7;
  --ina-primary-200: #ffa194;
  --ina-primary-300: #ff5f42;
  --ina-primary-400: #e8422d;
  --ina-primary-500: #cc1515;
  --ina-primary-600: #a00000;
  --ina-primary-700: #680000;
  --ina-primary-800: #290404;
  --ina-primary-900: #140202;
  --ina-primary-primary: #cc1515;

  /* Accent Colors - Green theme */
  --ina-accent-100: #f6fef9 !important;
  --ina-accent-200: #ecfef3 !important;
  --ina-accent-300: #d1fadf !important;
  --ina-accent-400: #a6f4c5 !important;
  --ina-accent-500: #12b76a !important;
  --ina-accent-600: #039855 !important;
  --ina-accent-700: #027a48 !important;

  /* Interactive Colors */
  --ina-inapas-brand-hover: #155eef !important;
  --ina-inapas-neutral-hover: var(--ina-neutral-50) !important;
}
/* InaPas Dark Mode Overrides */
[data-theme='dark'][data-brand='inapas'] {
  --ina-primary-primary: var(--ina-primary-400);
}
/* InaGov Theme - Government Services */
[data-brand='inagov'] {
  /* Primary Colors - Government Blue theme (Figma InaGov) */
  --ina-primary-25: #f6f9ff;
  --ina-primary-50: #eff5fd;
  --ina-primary-100: #c0d7f9;
  --ina-primary-200: #a1c4f5;
  --ina-primary-300: #629cef;
  --ina-primary-400: #196bcd;
  --ina-primary-500: #0956c3;
  --ina-primary-600: #0a489f;
  --ina-primary-700: #083575;
  --ina-primary-800: #022a5b;
  --ina-primary-900: #041225;
  --ina-primary-primary: #196bcd;

  /* Secondary Colors - Orange/Peach theme */
  --ina-secondary-25: #ffffff;
  --ina-secondary-50: #ffffff;
  --ina-secondary-100: #ffffff;
  --ina-secondary-200: #fff5ee;
  --ina-secondary-300: #ffe8cc;
  --ina-secondary-400: #ffd2a6;
  --ina-secondary-500: #edb98a;
  --ina-secondary-600: #d39663;
  --ina-secondary-700: #cc1515;

  /* Accent Colors - Orange theme (Legacy - kept for backward compatibility) */
  --ina-accent-100: #ffffff !important;
  --ina-accent-200: #fff5ee !important;
  --ina-accent-300: #ffe8cc !important;
  --ina-accent-400: #ffd2a6 !important;
  --ina-accent-500: #edb98a !important;
  --ina-accent-600: #d39663 !important;
  --ina-accent-700: #cc1515 !important;

  /* Interactive Colors */
  --ina-brand-hover: #588cd7 !important;
  --ina-neutral-hover: var(--ina-neutral-100) !important;
}
/* InaGov Dark Mode Overrides */
[data-theme='dark'][data-brand='inagov'] {
  --ina-primary-primary: var(--ina-primary-400);
  --ina-neutral-hover: var(--ina-neutral-800) !important;
}
/* InaKu Theme - Citizen Services */
[data-brand='inaku'] {
  /* Primary Colors - Citizen Dark Blue theme (Figma InaKu) */
  --ina-primary-25: #e8f1fc;
  --ina-primary-50: #d9e9f9;
  --ina-primary-100: #abd1ff;
  --ina-primary-200: #629cef;
  --ina-primary-300: #3a78c1;
  --ina-primary-400: #194472;
  --ina-primary-500: #06264d;
  --ina-primary-600: #041d35;
  --ina-primary-700: #020f1f;
  --ina-primary-800: #020b17;
  --ina-primary-900: #01080f;
  --ina-primary-primary: #06264d;

  /* Accent Colors - Gray Blue theme */
  --ina-accent-100: var(--ina-white) !important;
  --ina-accent-200: #6a7d94 !important;
  --ina-accent-300: #06264d !important;
  --ina-accent-400: #051c3a !important;
  --ina-accent-500: #031327 !important;
  --ina-accent-600: var(--ina-black) !important;
  --ina-accent-700: #6a7d94 !important;

  /* Interactive Colors */
  --ina-inaku-brand-hover: #b81313 !important;
  --ina-inaku-neutral-hover: var(--ina-neutral-50) !important;
}
/* InaKu Dark Mode Overrides */
[data-theme='dark'][data-brand='inaku'] {
  --ina-primary-primary: var(--ina-primary-300);
  --ina-inaku-neutral-hover: var(--ina-neutral-800) !important;
}
/* BGN Theme - Banking & Financial Services */
[data-brand='bgn'] {
  /* Primary Colors - Blue theme */
  --ina-primary-25: #ebf8ff;
  --ina-primary-50: #d3eeff;
  --ina-primary-100: #b1e2ff;
  --ina-primary-200: #7bd4ff;
  --ina-primary-300: #3eb8ff;
  --ina-primary-400: #1194ff;
  --ina-primary-500: #0070ff;
  --ina-primary-600: #0058ff;
  --ina-primary-700: #0048cf;
  --ina-primary-800: #0641a2;
  --ina-primary-900: #071e49;
  --ina-primary-primary: #0058ff;

  /* Secondary Colors - Gold/Brown theme */
  --ina-secondary-25: #fbf9f1;
  --ina-secondary-50: #f5f1df;
  --ina-secondary-100: #ebe0bd;
  --ina-secondary-200: #deca93;
  --ina-secondary-300: #d1b06c;
  --ina-secondary-400: #c5974a;
  --ina-secondary-500: #b8833e;
  --ina-secondary-600: #996835;
  --ina-secondary-700: #7b5431;
  --ina-secondary-800: #64462a;
  --ina-secondary-900: #352315;

  /* Brand-specific colors */
  --ina-bgn-brand-primary: #005494 !important;
  --ina-bgn-stroke-primary: #ededed !important;
  --ina-background-tertiary: #f5f5f5 !important;

  /* Sentiment colors */
  --ina-sentiment-info-400: #528aff !important;
  --ina-sentiment-info-500: #2871ff !important;
  --ina-sentiment-positive-500: #12b76a !important;
  --ina-sentiment-warning-500: #f79009 !important;

  /* Accent colors */
  --ina-accent-coral-orange: #ff7b5a !important;
  --ina-accent-yellow: #ffcb00 !important;
}
/* BKN Theme - Badan Kepegawaian Negara */
[data-brand='bkn'] {
  /* Primary Colors - Pink/Red theme */
  --ina-primary-25: #fdf2f7;
  --ina-primary-50: #fde6f1;
  --ina-primary-100: #fdcde3;
  --ina-primary-200: #fca5cb;
  --ina-primary-300: #f96da7;
  --ina-primary-400: #f24286;
  --ina-primary-500: #de1d5e;
  --ina-primary-600: #c41249;
  --ina-primary-700: #a2123c;
  --ina-primary-800: #871436;
  --ina-primary-900: #53041a;
  --ina-primary-primary: #de1d5e;

  /* Secondary Colors - Blue theme */
  --ina-secondary-25: #f2f9fd;
  --ina-secondary-50: #e3f0fb;
  --ina-secondary-100: #c1e3f6;
  --ina-secondary-200: #8accef;
  --ina-secondary-300: #4cb2e4;
  --ina-secondary-400: #269dd8;
  --ina-secondary-500: #177ab2;
  --ina-secondary-600: #146190;
  --ina-secondary-700: #145378;
  --ina-secondary-800: #164564;
  --ina-secondary-900: #0f2d42;

  /* Interactive Colors */
  --ina-bkn-brand-hover: #c41249 !important;
  --ina-bkn-neutral-hover: #fafafa !important;
}
/* LAN Theme - Local Area Network */
[data-brand='lan'] {
  /* Primary Colors - Blue theme */
  --ina-primary-25: #f3f6fc;
  --ina-primary-50: #e5edf9;
  --ina-primary-100: #c6daf1;
  --ina-primary-200: #94bde5;
  --ina-primary-300: #5b9bd5;
  --ina-primary-400: #3781c7;
  --ina-primary-500: #2663a3;
  --ina-primary-600: #1f4f85;
  --ina-primary-700: #1e446e;
  --ina-primary-800: #1e3a5c;
  --ina-primary-900: #14263d;
  --ina-primary-primary: #2663a3;

  /* Secondary Colors - Yellow/Orange theme */
  --ina-secondary-25: #fffdeb;
  --ina-secondary-50: #fdf9c8;
  --ina-secondary-100: #fbf38c;
  --ina-secondary-200: #f9e650;
  --ina-secondary-300: #f7d628;
  --ina-secondary-400: #f2bd1d;
  --ina-secondary-500: #d69009;
  --ina-secondary-600: #b1670c;
  --ina-secondary-700: #905110;
  --ina-secondary-800: #764111;
  --ina-secondary-900: #442204;

  /* Accent Colors */
  --ina-accent-red: #a40f0a;
  --ina-accent-green: #1cbd19;
  --ina-accent-blue: #0a35c0;
  --ina-accent-orange: #f08519;

  /* Interactive Colors */
  --ina-lan-brand-hover: #1f4f85 !important;
  --ina-lan-neutral-hover: #fafafa !important;
}
/* PANRB Theme*/
[data-brand='panrb'] {
  /* Primary Colors - Red/Maroon theme */
  --ina-primary-25: #fdf3f3;
  --ina-primary-50: #fce4e4;
  --ina-primary-100: #facecf;
  --ina-primary-200: #f5acad;
  --ina-primary-300: #ed7c7e;
  --ina-primary-400: #e15254;
  --ina-primary-500: #cd3537;
  --ina-primary-600: #b42b2d;
  --ina-primary-700: #8f2527;
  --ina-primary-800: #772526;
  --ina-primary-900: #400f10;
  --ina-primary-primary: #b42b2d;

  /* Secondary Colors - Grey/Purple-brown theme */
  --ina-secondary-25: #f8f7f8;
  --ina-secondary-50: #f0eeee;
  --ina-secondary-100: #ded9da;
  --ina-secondary-200: #c1b8bb;
  --ina-secondary-300: #9f9196;
  --ina-secondary-400: #847379;
  --ina-secondary-500: #6c5d62;
  --ina-secondary-600: #584c50;
  --ina-secondary-700: #4b4144;
  --ina-secondary-800: #41393b;
  --ina-secondary-900: #231f20;

  --ina-accent-yellow: #f2c548;
}
/* PANRB Dark Mode Overrides */
[data-theme='dark'][data-brand='panrb'] {
  --ina-primary-primary: var(--ina-primary-400);
}
/* Base Colors - Light Mode (Default) */
:root,
[data-theme='light'] {
  /* Base Colors */
  --ina-white: var(--ina-neutral-25) /* #ffffff */;
  --ina-base-white: var(--ina-neutral-25); /* #ffffff */
  --ina-black: var(--ina-neutral-900) /* #141414 */;
  --ina-base-black: #000000; /* #000000 */

  /* Background Colors */
  --ina-background-primary: var(--ina-neutral-25) /* #ffffff */;
  --ina-background-secondary: var(--ina-neutral-50) /* #f8f8f7 */;
  --ina-background-tertiary: var(--ina-neutral-100) /* #f2f2f2 */;
  --ina-background-overlay: var(--ina-overlay) /* #1f1f1f7a */;

  /* Content Colors */
  --ina-content-primary: var(--ina-neutral-800) /* #1f1f1f */;
  --ina-content-secondary: var(--ina-neutral-600) /* #525252 */;
  --ina-content-tertiary: var(--ina-neutral-400) /* #a3a3a3 */;
  --ina-content-guide: var(--ina-blue-500) /* #0968f6 */;
  --ina-content-negative: var(--ina-red-500) /* #f02d2d */;
  --ina-content-positive: var(--ina-green-600) /* #288034 */;

  /* Stroke Colors */
  --ina-stroke-primary: var(--ina-neutral-200) /* #e5e5e5 */;
  --ina-stroke-secondary: var(--ina-neutral-400) /* #a3a3a3 */;
  --ina-stroke-tertiary: var(--ina-neutral-800) /* #1f1f1f */;

  /* Guide Colors */
  --ina-guide-50: var(--ina-blue-50) /* #fafcff */;
  --ina-guide-100: var(--ina-blue-100) /* #ecf3fe */;
  --ina-guide-200: var(--ina-blue-200) /* #dceafe */;
  --ina-guide-300: var(--ina-blue-300) /* #84b4fb */;
  --ina-guide-400: var(--ina-blue-400) /* #4d93fc */;
  --ina-guide-500: var(--ina-blue-500) /* #0968f6 */;
  --ina-guide-600: var(--ina-blue-600) /* #0049b8 */;
  --ina-guide-700: var(--ina-blue-700) /* #002a69 */;
  --ina-guide-800: var(--ina-blue-800) /* #0e192a */;
  --ina-guide-900: var(--ina-blue-900) /* #070e17 */;

  /* Negative Colors */
  --ina-negative-50: var(--ina-red-50) /* #fffafa */;
  --ina-negative-100: var(--ina-red-100) /* #fdeded */;
  --ina-negative-200: var(--ina-red-200) /* #ffe0e0 */;
  --ina-negative-300: var(--ina-red-300) /* #ffa0a0 */;
  --ina-negative-400: var(--ina-red-400) /* #ff5c5c */;
  --ina-negative-500: var(--ina-red-500) /* #f02d2d */;
  --ina-negative-600: var(--ina-red-600) /* #d50b0b */;
  --ina-negative-700: var(--ina-red-700) /* #570303 */;
  --ina-negative-800: var(--ina-red-800) /* #2a0303 */;
  --ina-negative-900: var(--ina-red-900) /* #1d0202 */;
  --ina-sentiment-negative-50: var(--ina-red-50) /* #fffafa */;
  --ina-sentiment-negative-100: var(--ina-red-100) /* #fdeded */;
  --ina-sentiment-negative-200: var(--ina-red-200) /* #ffe0e0 */;
  --ina-sentiment-negative-300: var(--ina-red-300) /* #ffa0a0 */;
  --ina-sentiment-negative-400: var(--ina-red-400) /* #ff5c5c */;
  --ina-sentiment-negative-500: var(--ina-red-500) /* #f02d2d */;
  --ina-sentiment-negative-600: var(--ina-red-600) /* #d50b0b */;
  --ina-sentiment-negative-700: var(--ina-red-700) /* #570303 */;
  --ina-sentiment-negative-800: var(--ina-red-800) /* #2a0303 */;
  --ina-sentiment-negative-900: var(--ina-red-900) /* #1d0202 */;

  /* Positive Colors */
  --ina-positive-50: var(--ina-green-50) /* #fafffa */;
  --ina-positive-100: var(--ina-green-100) /* #edfded */;
  --ina-positive-200: var(--ina-green-200) /* #e0fae0 */;
  --ina-positive-300: var(--ina-green-300) /* #a6f0a5 */;
  --ina-positive-400: var(--ina-green-400) /* #4ce160 */;
  --ina-positive-500: var(--ina-green-500) /* #3cc14e */;
  --ina-positive-600: var(--ina-green-600) /* #288034 */;
  --ina-positive-700: var(--ina-green-700) /* #1b561a */;
  --ina-positive-800: var(--ina-green-800) /* #0c310d */;
  --ina-positive-900: var(--ina-green-900) /* #021d06 */;
  --ina-sentiment-positive-50: var(--ina-green-50) /* #fafffa */;
  --ina-sentiment-positive-100: var(--ina-green-100) /* #edfded */;
  --ina-sentiment-positive-200: var(--ina-green-200) /* #e0fae0 */;
  --ina-sentiment-positive-300: var(--ina-green-300) /* #a6f0a5 */;
  --ina-sentiment-positive-400: var(--ina-green-400) /* #4ce160 */;
  --ina-sentiment-positive-500: var(--ina-green-500) /* #3cc14e */;
  --ina-sentiment-positive-600: var(--ina-green-600) /* #288034 */;
  --ina-sentiment-positive-700: var(--ina-green-700) /* #1b561a */;
  --ina-sentiment-positive-800: var(--ina-green-800) /* #0c310d */;
  --ina-sentiment-positive-900: var(--ina-green-900) /* #021d06 */;

  /* Warning Colors */
  --ina-warning-50: var(--ina-yellow-50) /* #fffefa */;
  --ina-warning-100: var(--ina-yellow-100) /* #fff9eb */;
  --ina-warning-200: var(--ina-yellow-200) /* #fff8d5 */;
  --ina-warning-300: var(--ina-yellow-300) /* #ffe58a */;
  --ina-warning-400: var(--ina-yellow-400) /* #ffcc14 */;
  --ina-warning-500: var(--ina-yellow-500) /* #eebb04 */;
  --ina-warning-600: var(--ina-yellow-600) /* #855f00 */;
  --ina-warning-700: var(--ina-yellow-700) /* #553b06 */;
  --ina-warning-800: var(--ina-yellow-800) /* #312102 */;
  --ina-warning-900: var(--ina-yellow-900) /* #1c1402 */;
  --ina-sentiment-warning-50: var(--ina-yellow-50) /* #fffefa */;
  --ina-sentiment-warning-100: var(--ina-yellow-100) /* #fff9eb */;
  --ina-sentiment-warning-200: var(--ina-yellow-200) /* #fff8d5 */;
  --ina-sentiment-warning-300: var(--ina-yellow-300) /* #ffe58a */;
  --ina-sentiment-warning-400: var(--ina-yellow-400) /* #ffcc14 */;
  --ina-sentiment-warning-500: var(--ina-yellow-500) /* #eebb04 */;
  --ina-sentiment-warning-600: var(--ina-yellow-600) /* #855f00 */;
  --ina-sentiment-warning-700: var(--ina-yellow-700) /* #553b06 */;
  --ina-sentiment-warning-800: var(--ina-yellow-800) /* #312102 */;
  --ina-sentiment-warning-900: var(--ina-yellow-900) /* #1c1402 */;
}
/* Base Colors - Dark Mode */
[data-theme='dark'] {
  /* Base Colors */
  --ina-white: var(--ina-neutral-900) /* #141414 */;
  --ina-base-white: var(--ina-neutral-25); /* #ffffff */
  --ina-black: var(--ina-neutral-25) /* #ffffff */;
  --ina-base-black: #000000; /* #000000 */

  /* Background Colors */
  --ina-background-primary: var(--ina-neutral-900) /* #141414 */;
  --ina-background-secondary: var(--ina-neutral-800) /* #1f1f1f */;
  --ina-background-tertiary: var(--ina-neutral-700) /* #404040 */;
  --ina-background-overlay: var(--ina-overlay) /* #1f1f1f7a */;

  /* Content Colors */
  --ina-content-primary: var(--ina-neutral-25) /* #ffffff */;
  --ina-content-secondary: var(--ina-neutral-400) /* #a3a3a3 */;
  --ina-content-tertiary: var(--ina-neutral-500) /* #737373 */;
  --ina-content-guide: var(--ina-blue-400) /* #4d93fc */;
  --ina-content-negative: var(--ina-red-400) /* #ff5c5c */;
  --ina-content-positive: var(--ina-green-500) /* #3cc14e */;

  /* Stroke Colors */
  --ina-stroke-primary: var(--ina-neutral-700) /* #404040 */;
  --ina-stroke-secondary: var(--ina-neutral-400) /* #a3a3a3 */;
  --ina-stroke-tertiary: var(--ina-neutral-200) /* #e5e5e5 */;

  /* Guide Colors */
  --ina-guide-50: var(--ina-blue-50) /* #fafcff */;
  --ina-guide-100: var(--ina-blue-100) /* #ecf3fe */;
  --ina-guide-200: var(--ina-blue-200) /* #dceafe */;
  --ina-guide-300: var(--ina-blue-300) /* #84b4fb */;
  --ina-guide-400: var(--ina-blue-400) /* #4d93fc */;
  --ina-guide-500: var(--ina-blue-500) /* #0968f6 */;
  --ina-guide-600: var(--ina-blue-600) /* #0049b8 */;
  --ina-guide-700: var(--ina-blue-700) /* #002a69 */;
  --ina-guide-800: var(--ina-blue-800) /* #0e192a */;
  --ina-guide-900: var(--ina-blue-900) /* #070e17 */;

  /* Negative Colors */
  --ina-negative-50: var(--ina-red-50) /* #fffafa */;
  --ina-negative-100: var(--ina-red-100) /* #fdeded */;
  --ina-negative-200: var(--ina-red-200) /* #ffe0e0 */;
  --ina-negative-300: var(--ina-red-300) /* #ffa0a0 */;
  --ina-negative-400: var(--ina-red-400) /* #ff5c5c */;
  --ina-negative-500: var(--ina-red-500) /* #f02d2d */;
  --ina-negative-600: var(--ina-red-600) /* #d50b0b */;
  --ina-negative-700: var(--ina-red-700) /* #570303 */;
  --ina-negative-800: var(--ina-red-800) /* #2a0303 */;
  --ina-negative-900: var(--ina-red-900) /* #1d0202 */;
  --ina-sentiment-negative-50: var(--ina-red-50) /* #fffafa */;
  --ina-sentiment-negative-100: var(--ina-red-100) /* #fdeded */;
  --ina-sentiment-negative-200: var(--ina-red-200) /* #ffe0e0 */;
  --ina-sentiment-negative-300: var(--ina-red-300) /* #ffa0a0 */;
  --ina-sentiment-negative-400: var(--ina-red-400) /* #ff5c5c */;
  --ina-sentiment-negative-500: var(--ina-red-500) /* #f02d2d */;
  --ina-sentiment-negative-600: var(--ina-red-600) /* #d50b0b */;
  --ina-sentiment-negative-700: var(--ina-red-700) /* #570303 */;
  --ina-sentiment-negative-800: var(--ina-red-800) /* #2a0303 */;
  --ina-sentiment-negative-900: var(--ina-red-900) /* #1d0202 */;

  /* Positive Colors */
  --ina-positive-50: var(--ina-green-50) /* #fafffa */;
  --ina-positive-100: var(--ina-green-100) /* #edfded */;
  --ina-positive-200: var(--ina-green-200) /* #e0fae0 */;
  --ina-positive-300: var(--ina-green-300) /* #a6f0a5 */;
  --ina-positive-400: var(--ina-green-400) /* #4ce160 */;
  --ina-positive-500: var(--ina-green-500) /* #3cc14e */;
  --ina-positive-600: var(--ina-green-600) /* #288034 */;
  --ina-positive-700: var(--ina-green-700) /* #1b561a */;
  --ina-positive-800: var(--ina-green-800) /* #0c310d */;
  --ina-positive-900: var(--ina-green-900) /* #021d06 */;
  --ina-sentiment-positive-50: var(--ina-green-50) /* #fafffa */;
  --ina-sentiment-positive-100: var(--ina-green-100) /* #edfded */;
  --ina-sentiment-positive-200: var(--ina-green-200) /* #e0fae0 */;
  --ina-sentiment-positive-300: var(--ina-green-300) /* #a6f0a5 */;
  --ina-sentiment-positive-400: var(--ina-green-400) /* #4ce160 */;
  --ina-sentiment-positive-500: var(--ina-green-500) /* #3cc14e */;
  --ina-sentiment-positive-600: var(--ina-green-600) /* #288034 */;
  --ina-sentiment-positive-700: var(--ina-green-700) /* #1b561a */;
  --ina-sentiment-positive-800: var(--ina-green-800) /* #0c310d */;
  --ina-sentiment-positive-900: var(--ina-green-900) /* #021d06 */;

  /* Warning Colors */
  --ina-warning-50: var(--ina-yellow-50) /* #fffefa */;
  --ina-warning-100: var(--ina-yellow-100) /* #fff9eb */;
  --ina-warning-200: var(--ina-yellow-200) /* #fff8d5 */;
  --ina-warning-300: var(--ina-yellow-300) /* #ffe58a */;
  --ina-warning-400: var(--ina-yellow-400) /* #ffcc14 */;
  --ina-warning-500: var(--ina-yellow-500) /* #eebb04 */;
  --ina-warning-600: var(--ina-yellow-600) /* #855f00 */;
  --ina-warning-700: var(--ina-yellow-700) /* #553b06 */;
  --ina-warning-800: var(--ina-yellow-800) /* #312102 */;
  --ina-warning-900: var(--ina-yellow-900) /* #1c1402 */;
  --ina-sentiment-warning-50: var(--ina-yellow-50) /* #fffefa */;
  --ina-sentiment-warning-100: var(--ina-yellow-100) /* #fff9eb */;
  --ina-sentiment-warning-200: var(--ina-yellow-200) /* #fff8d5 */;
  --ina-sentiment-warning-300: var(--ina-yellow-300) /* #ffe58a */;
  --ina-sentiment-warning-400: var(--ina-yellow-400) /* #ffcc14 */;
  --ina-sentiment-warning-500: var(--ina-yellow-500) /* #eebb04 */;
  --ina-sentiment-warning-600: var(--ina-yellow-600) /* #855f00 */;
  --ina-sentiment-warning-700: var(--ina-yellow-700) /* #553b06 */;
  --ina-sentiment-warning-800: var(--ina-yellow-800) /* #312102 */;
  --ina-sentiment-warning-900: var(--ina-yellow-900) /* #1c1402 */;

  /* Shadow Color - Higher opacity black for depth on dark background */
  --ina-shadow-color: 0, 0, 0;
}
/* =========================== */
/* CSS RESET & BASE STYLES     */
/* =========================== */
/* Import Google Fonts - Inter */
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
/* Remove default border and background from specific input types */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'],
input[type='week'],
input[type='file'],
input[type='range'],
input[type='color'],
textarea,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================== */
/* FORM ELEMENTS RESET         */
/* =========================== */
/* Additional form element resets */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
/* textarea overflow handled above */
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
       appearance: textfield;
  outline-offset: -2px;
}
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  appearance: button;
  font: inherit;
}
/* =========================== */
/* TABLE RESET                 */
/* =========================== */
/* Reset tables */
/* table {
  border-color: inherit;
  border-collapse: collapse;
  border-spacing: 0;
} */
/* thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
} */
/* th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
} */
/* th {
  font-weight: 600;
} */
/* =========================== */
/* MISCELLANEOUS RESET         */
/* =========================== */
/* Reset pagination and navigation */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Reset code elements */
code,
kbd,
samp {
  font-family:
    'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
    monospace;
  font-size: 1em;
}
/* Reset abbreviation */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/* Reset del and ins */
del {
  text-decoration: line-through;
}
ins {
  text-decoration: underline;
}
/* Reset dfn */
dfn {
  font-style: italic;
}
/* Import all component styles */
/**
 * Accordion Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-accordion {
  /* Root container accordion */
  border-bottom: 1px solid var(--ina-stroke-primary);
  background-color: inherit;
  position: relative;
}
.ina-accordion__toggle {
  /* Button untuk toggle accordion */
  width: 100%;
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-semibold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ina-spacing-4) 0;
  outline: none;
  cursor: pointer;
  background: none;
  border: none;
  transition: var(--ina-transition-fast);
  position: relative;
  z-index: 1;
}
/* Focus visible behavior for accessibility */
.ina-accordion__toggle:focus-visible:not(:disabled) {
  background-color: var(--ina-neutral-100);
  outline: 2px solid var(--ina-primary-600, #0968f6);
  outline-offset: -2px; /* ensure outline stays within bounds without shifting layout */
  border-radius: var(--ina-radius-md, 8px);
}
/* Responsive font size */
@media (min-width: 1024px) {
  .ina-accordion__toggle {
    font-size: var(--ina-font-base);
  }
}
.ina-accordion__title {
  /* Title section di sebelah kiri */
  color: var(--ina-content-primary);
  transition: var(--ina-transition-fast);
  font-size: 12px;
}
.ina-accordion__title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Responsive font size untuk title */
@media screen and (min-width: 768px) {
  .ina-accordion__title {
    font-size: 14px;
  }
}
.ina-accordion__toggler {
  /* Toggler section di sebelah kanan */
  flex-shrink: 0;
  color: var(--ina-content-primary);
  transition: var(--ina-transition-fast);
}
.ina-accordion__toggler:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ina-accordion__icon {
  transition: transform 200ms ease;
  transform: rotate(0deg);
  color: var(--ina-content-primary);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ina-accordion__icon--open {
  transform: rotate(180deg);
}
/* Responsive icon sizing */
@media (min-width: 640px) {
  .ina-accordion__icon {
    width: 16px;
    height: 16px;
  }
}
@media (min-width: 768px) {
  .ina-accordion__icon {
    width: 18px;
    height: 18px;
  }
}
@media (min-width: 1024px) {
  .ina-accordion__icon {
    width: 20px;
    height: 20px;
  }
}
@media (min-width: 1280px) {
  .ina-accordion__icon {
    width: 24px;
    height: 24px;
  }
}
.ina-accordion__content {
  /* Content container yang muncul/muncul */
  overflow: hidden;
  position: relative;
  z-index: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
}
.ina-accordion__content--open {
  max-height: 1000px;
  opacity: 1;
}
.ina-accordion__body {
  /* Body content yang muncul saat accordion terbuka */
  padding-bottom: var(--ina-spacing-4);
  color: var(--ina-content-primary);
  font-size: var(--ina-font-xs);
}
/* Responsive font size untuk body */
@media (min-width: 1024px) {
  .ina-accordion__body {
    font-size: var(--ina-font-sm);
  }
}
/* Accordion Group */
.ina-accordion-group {
  display: flex;
  flex-direction: column;
}
/**
 * AccordionCard Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-accordion-card {
  /* Root container accordion card */
  border: 1px solid var(--ina-stroke-primary);
  padding: var(--ina-spacing-4);
  border-radius: var(--ina-radius-lg);
  overflow: hidden;
}
.ina-accordion-card__header {
  /* Header area yang dapat diklik untuk toggle */
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  outline: none;
  transition: var(--ina-transition-fast);
}
.ina-accordion-card__header:focus {
  outline: 2px solid var(--ina-guide-500);
  outline-offset: 2px;
}
.ina-accordion-card__icon {
  /* Container untuk icon chevron */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem; /* 32px */
  height: 2rem; /* 32px */
  border-radius: var(--ina-radius-lg);
  color: var(--ina-content-secondary);
  background-color: var(--ina-background-secondary);
  margin-right: var(--ina-spacing-4);
}
.ina-accordion-card__chevron {
  /* Icon chevron dengan animasi rotation */
  transition: transform 200ms ease;
  transform: rotate(180deg);
}
.ina-accordion-card__chevron--open {
  /* State terbuka: chevron menghadap atas */
  transform: rotate(0deg);
}
.ina-accordion-card__title {
  /* Judul accordion */
  text-align: left;
  font-weight: var(--ina-font-semibold);
  font-size: var(--ina-font-sm);
  color: var(--ina-content-primary);
  width: 100%;
}
/* Responsive font size untuk title */
@media (min-width: 640px) {
  .ina-accordion-card__title {
    font-size: var(--ina-font-base);
  }
}
.ina-accordion-card__content {
  /* Container untuk content dengan height animation */
  height: 0px;
  overflow: hidden;
  transition: height 500ms ease;
}
.ina-accordion-card__content-body {
  /* Body content dengan padding */
  padding: 0.75rem var(--ina-spacing-4); /* py-3 px-4 equivalent */
}
/* Modifier untuk state terbuka */
.ina-accordion-card--open .ina-accordion-card__content {
  /* Height akan dikontrol melalui JavaScript inline style */
}
/* Focus styles untuk accessibility */
.ina-accordion-card__header:focus-visible {
  outline: 2px solid var(--ina-guide-500);
  outline-offset: 2px;
  border-radius: var(--ina-radius-base);
}
/* Hover effects */
.ina-accordion-card__header:hover .ina-accordion-card__icon {
  background-color: var(--ina-neutral-200);
}
.ina-accordion-card__header:hover .ina-accordion-card__title {
  color: var(--ina-secondary);
}
/**
 * Dropdown Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-action-dropdown {
  /* Base dropdown container */
  position: relative;
  display: inline-block;
  text-align: left;
}
/* Trigger variants */
/* Trigger variants */
.ina-action-dropdown__trigger {
  cursor: pointer;
  transition: opacity var(--ina-transition-base);
  width: 100%; /* Ensure full width availability */
}
/* Standardized Trigger Button (Select-like look) */
.ina-action-dropdown__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-lg);
  padding: var(--ina-spacing-2) var(--ina-spacing-4);
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  cursor: pointer;
  font-size: var(--ina-font-sm);
  outline: none;
  transition: all var(--ina-transition-base);
  gap: var(--ina-spacing-2);
  min-height: 40px; /* Match standard input height */
}
.ina-action-dropdown__trigger:hover {
  background-color: var(--ina-background-secondary);
}
/* Active/Open State for Trigger Button */
.ina-action-dropdown__trigger--open,
.ina-action-dropdown__trigger:focus-within {
  border-color: var(--ina-stroke-tertiary, #141414);
  background: var(--ina-background-primary, #fff);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
}
.ina-action-dropdown__label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ina-action-dropdown__icon {
  flex-shrink: 0;
  color: var(--ina-content-tertiary);
  transition: transform var(--ina-transition-base);
}
.ina-action-dropdown__trigger--open .ina-action-dropdown__icon {
  transform: rotate(180deg);
}
.ina-action-dropdown__trigger--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
/* Menu container */
.ina-action-dropdown .ina-action-dropdown__menu {
  position: absolute;
  background-color: var(--ina-background-primary);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-lg);
  box-shadow: var(--ina-shadow-lg);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--ina-transition-duration-200) ease-out,
    transform var(--ina-transition-duration-200) ease-out;
  min-height: -moz-fit-content;
  min-height: fit-content;
  min-width: 100%; /* Default match trigger width */
  width: -moz-max-content;
  width: max-content; /* Allow content to dictate width, but at least 100% of trigger */
  pointer-events: none;
  visibility: hidden;
  padding: var(--ina-spacing-0-5);
  margin-top: var(--ina-spacing-2, 0.5rem);
}
.ina-action-dropdown__menu--visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}
/* ... existing styles ... */
/* Width variants */
.ina-action-dropdown__menu--width-auto {
  width: auto;
  min-width: 160px;
}
.ina-action-dropdown__menu--width-sm {
  min-width: 120px;
  width: auto;
}
.ina-action-dropdown__menu--width-md {
  min-width: 160px;
  width: auto;
}
.ina-action-dropdown__menu--width-lg {
  min-width: 200px;
  width: auto;
}
.ina-action-dropdown__menu--width-xl {
  min-width: 240px;
  width: auto;
}
.ina-action-dropdown__menu--width-full {
  width: 100%;
}
/* Menu list */
.ina-action-dropdown__list {
  padding: var(--ina-spacing-1) 0;
  margin: 0;
  list-style: none;
  background-color: inherit;
}
/* Menu items */
.ina-action-dropdown__item {
  width: 100%;
  text-align: left;
  padding: var(--ina-spacing-2) var(--ina-spacing-4);
  font-size: var(--ina-font-sm);
  color: var(--ina-content-primary);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color var(--ina-transition-base);
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2);
  margin-bottom: 0 !important;
}
.ina-action-dropdown__item:hover {
  background-color: var(--ina-background-secondary);
}
.ina-action-dropdown__item:focus {
  outline: none;
  background-color: var(--ina-primary-100);
  color: var(--ina-primary-600);
}
.ina-action-dropdown__item:active {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
/* Item variants */
.ina-action-dropdown__item--danger {
  color: var(--ina-negative-600);
}
.ina-action-dropdown__item--danger:hover {
  background-color: var(--ina-negative-100);
}
.ina-action-dropdown__item--warning {
  color: var(--ina-warning-600);
}
.ina-action-dropdown__item--warning:hover {
  background-color: var(--ina-warning-100);
}
.ina-action-dropdown__item--success {
  color: var(--ina-positive-600);
}
.ina-action-dropdown__item--success:hover {
  background-color: var(--ina-positive-100);
}
.ina-action-dropdown__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--ina-content-tertiary);
}
.ina-action-dropdown__item--disabled:hover {
  background-color: transparent;
}
/* Item with icons */
.ina-action-dropdown__item-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.ina-action-dropdown__item-content {
  flex: 1;
  min-width: 0;
}
.ina-action-dropdown__item-description {
  font-size: var(--ina-font-xs);
  color: var(--ina-content-secondary);
  margin-top: var(--ina-spacing-0-5);
}
/* Separators */
.ina-action-dropdown__separator {
  height: 1px;
  background-color: var(--ina-stroke-primary);
  margin: var(--ina-spacing-1) var(--ina-spacing-4);
}
/* Dividers */
.ina-action-dropdown__divider {
  height: var(--ina-spacing-4);
}
/* Animation variants */
.ina-action-dropdown__menu--animation-fade {
  transform: translateY(0);
  transition: opacity var(--ina-transition-duration-200) ease-out;
}
.ina-action-dropdown__menu--animation-slide-up {
  transform: translateY(1rem);
  transition:
    opacity var(--ina-transition-duration-200) ease-out,
    transform var(--ina-transition-duration-200) ease-out;
}
.ina-action-dropdown__menu--animation-slide-down {
  transform: translateY(-1rem);
  transition:
    opacity var(--ina-transition-duration-200) ease-out,
    transform var(--ina-transition-duration-200) ease-out;
}
.ina-action-dropdown__menu--animation-scale {
  transform: scale(0.95);
  transition:
    opacity var(--ina-transition-duration-200) ease-out,
    transform var(--ina-transition-duration-200) ease-out;
}
/* All visible states */
.ina-action-dropdown__menu--animation-fade.ina-action-dropdown__menu--visible,
.ina-action-dropdown__menu--animation-slide-up.ina-action-dropdown__menu--visible,
.ina-action-dropdown__menu--animation-slide-down.ina-action-dropdown__menu--visible,
.ina-action-dropdown__menu--animation-scale.ina-action-dropdown__menu--visible {
  transform: translateY(0) scale(1);
}
/* Backdrop click area */
.ina-action-dropdown__backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}
/* Grouped items */
.ina-action-dropdown__group {
  margin: var(--ina-spacing-2) 0;
}
.ina-action-dropdown__group:first-child {
  margin-top: 0;
}
.ina-action-dropdown__group:last-child {
  margin-bottom: 0;
}
.ina-action-dropdown__group-header {
  padding: var(--ina-spacing-1) var(--ina-spacing-4) var(--ina-spacing-0-5);
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Loading states */
.ina-action-dropdown__loading {
  padding: var(--ina-spacing-2) var(--ina-spacing-4);
  text-align: center;
  color: var(--ina-content-secondary);
  font-size: var(--ina-font-sm);
}
.ina-action-dropdown__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ina-primary-100);
  border-radius: 50%;
  border-top-color: var(--ina-primary-500);
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ina-action-dropdown__menu--width-lg,
  .ina-action-dropdown__menu--width-xl {
    width: calc(100vw - var(--ina-spacing-8));
    max-width: 300px;
  }
}
@media (max-width: 768px) {
  .ina-action-dropdown__item {
    padding: var(--ina-spacing-3) var(--ina-spacing-4);
    font-size: var(--ina-font-base);
  }
}
/* Scrollable content */
.ina-action-dropdown__menu--scrollable {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ina-content-tertiary)
    var(--ina-background-tertiary, #f2f2f2);
}
.ina-action-dropdown__menu--scrollable::-webkit-scrollbar {
  width: 6px;
}
.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-track {
  background: var(--ina-background-tertiary, #f2f2f2);
  border-radius: 3px;
}
.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-thumb {
  background-color: var(--ina-content-tertiary);
  border-radius: 3px;
}
.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-thumb:hover {
  background-color: var(--ina-content-secondary);
}
/* Focus management */
.ina-action-dropdown__menu:focus-within .ina-action-dropdown__item:focus {
  background-color: var(--ina-primary-100);
}
/**
 * Alert Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-" dan variant modifiers
 */
.ina-alert {
  /* Base alert styling */
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--ina-spacing-2);
  border-radius: var(--ina-radius-lg);
  padding: var(--ina-spacing-4);
  border: 1px solid;
  box-sizing: border-box;
}
.ina-alert__icon {
  /* Container untuk icon/variant */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ina-alert__content {
  /* Main content area */
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}
.ina-alert__text-section {
  /* Container untuk title dan description */
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ina-alert__title {
  /* Alert title */
  font-weight: var(--ina-font-semibold);
  font-size: var(--ina-font-sm);
  line-height: var(--ina-line-height-sm);
  margin: 0;
}
.ina-alert__description {
  /* Alert description/subtitle */
  font-size: var(--ina-font-xs);
  line-height: var(--ina-line-height-xs);
  margin: 0;
  margin-top: var(--ina-spacing-1);
  color: var(--ina-content-primary, var(--ina-neutral-800));
}
.ina-alert__action {
  /* Optional action node area */
  margin-left: var(--ina-spacing-4);
  flex-shrink: 0;
}
.ina-alert__close-button {
  /* Close button */
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-primary, var(--ina-neutral-800));

  /* Focus styles */
  outline: none;
}
.ina-alert__close-button:focus {
  outline: 2px solid var(--ina-guide-500);
  outline-offset: 2px;
  border-radius: var(--ina-radius-sm);
}
.ina-alert__close-icon {
  /* Icon di dalam close button */
  transition: stroke-width 150ms ease;
}
.ina-alert__close-button:hover .ina-alert__close-icon {
  stroke-width: 2;
}
/* Variant modifiers */
.ina-alert--neutral {
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  border-color: var(--ina-stroke-tertiary);
}
.ina-alert--neutral .ina-alert__icon,
.ina-alert--neutral .ina-alert__title {
  color: var(--ina-content-primary, var(--ina-neutral-800));
}
.ina-alert--info {
  background-color: var(--ina-guide-100, var(--ina-blue-100));
  border-color: var(--ina-guide-500, var(--ina-blue-500));
}
.ina-alert--info .ina-alert__icon,
.ina-alert--info .ina-alert__title {
  color: var(--ina-guide-500, var(--ina-blue-500));
}
.ina-alert--success {
  background-color: var(--ina-positive-50);
  border-color: var(--ina-positive-600);
}
.ina-alert--success .ina-alert__icon,
.ina-alert--success .ina-alert__title {
  color: var(--ina-positive-600);
}
.ina-alert--caution {
  background-color: var(--ina-warning-100);
  border-color: var(--ina-warning-500);
}
.ina-alert--caution .ina-alert__icon,
.ina-alert--caution .ina-alert__title {
  color: var(--ina-warning-500);
}
.ina-alert--critical {
  background-color: var(--ina-negative-100);
  border-color: var(--ina-negative-500);
}
.ina-alert--critical .ina-alert__icon,
.ina-alert--critical .ina-alert__title {
  color: var(--ina-negative-500);
}
/* Animation states */
.ina-alert--entering {
  opacity: 0;
}
.ina-alert--entered {
  opacity: 1;
}
.ina-alert--exiting {
  opacity: 0;
}
/* Responsive adjustments */
@media (max-width: 639px) {
  .ina-alert {
    padding: var(--ina-spacing-2) var(--ina-spacing-3);
  }

  .ina-alert__title {
    font-size: var(--ina-font-xs); /* Turun dari base ke sm */
  }

  .ina-alert__description {
    font-size: var(--ina-font-2xs); /* Turun dari sm ke xs */
  }

  .ina-alert__icon {
    margin-right: var(--ina-spacing-2);
  }

  .ina-alert__action {
    margin-left: var(--ina-spacing-2);
  }
}
/**
 * Avatar Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-" dan size modifiers
 */
.ina-avatar {
  /* Base avatar styling */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--ina-background-secondary, var(--ina-white));
  color: var(--ina-content-primary, var(--ina-neutral-800));
  border: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
  box-sizing: border-box;
}
.ina-avatar--image {
  /* Image avatar styling */
  -o-object-fit: cover;
     object-fit: cover;
}
/* Shape modifiers */
.ina-avatar--circle {
  border-radius: 50%;
}
.ina-avatar--square {
  border-radius: 8px;
}
/* Size modifiers */
.ina-avatar--16 {
  width: 16px;
  height: 16px;
  font-size: 6px;
}
.ina-avatar--16:not(.ina-avatar--image) {
  padding: 4.167px;
}
.ina-avatar--24 {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.ina-avatar--24:not(.ina-avatar--image) {
  padding: 6.25px;
}
.ina-avatar--32 {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.ina-avatar--32:not(.ina-avatar--image) {
  padding: 8px;
}
.ina-avatar--40 {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.ina-avatar--40:not(.ina-avatar--image) {
  padding: 10px;
}
.ina-avatar--48 {
  width: 48px;
  height: 48px;
  font-size: 24px;
}
.ina-avatar--48:not(.ina-avatar--image) {
  padding: 12.5px;
}
/* Responsive adjustments untuk mobile */
@media (max-width: 640px) {
  .ina-avatar--24,
  .ina-avatar--32 {
    font-size: 10px;
  }

  .ina-avatar--40,
  .ina-avatar--48 {
    font-size: 12px;
  }
}
/* Hover effects untuk interactive avatars */
.ina-avatar--interactive {
  transition: var(--ina-transition-fast);
  cursor: pointer;
}
.ina-avatar--interactive:hover {
  box-shadow: var(--ina-shadow-sm);
  transform: scale(1.05);
}
/* Focus styles untuk accessibility */
.ina-avatar--interactive:focus {
  outline: 2px solid var(--ina-guide-500);
  outline-offset: 2px;
}
/* Badge/Presence indicator */
.ina-avatar__badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ina-radius-full);
  border: 2px solid var(--ina-neutral-25);
}
.ina-avatar__badge--online {
  background-color: var(--ina-success-500);
}
.ina-avatar__badge--away {
  background-color: var(--ina-warning-500);
}
.ina-avatar__badge--offline {
  background-color: var(--ina-neutral-400);
}
.ina-avatar__badge--busy {
  background-color: var(--ina-error-500);
}
/* Loading state */
.ina-avatar--loading {
  background: linear-gradient(
    90deg,
    var(--ina-neutral-200) 25%,
    var(--ina-neutral-100) 50%,
    var(--ina-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: avatar-loading 1.5s infinite;
}
@keyframes avatar-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* Error state */
.ina-avatar--error {
  background-color: var(--ina-neutral-200);
  color: var(--ina-neutral-500);
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-avatar {
    background-color: var(--ina-neutral-800);
    color: var(--ina-neutral-300);
  }

  .ina-avatar__badge {
    border-color: var(--ina-neutral-900);
  }

  .ina-avatar--error {
    background-color: var(--ina-neutral-800);
    color: var(--ina-neutral-600);
  }
} */
/**
 * Badge Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-" dan multiple modifiers
 * Mengakomodir kombinasi type, variant, size, dan rounded
 */
.ina-badge {
  /* Base badge styling */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  gap: 4px;
  font-weight: 500;
  box-sizing: border-box;
}
.ina-badge__prefix-icon,
.ina-badge__suffix-icon {
  /* Icon containers */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Type modifiers - Soft */
.ina-badge--soft {
  /* Soft badges: background level 100, text level 500 */
  border: none;
}
/* Type modifiers - Fill */
.ina-badge--fill {
  /* Fill badges: background level 500, text level 100 */
  border: none;
}
/* Variant modifiers - Brand (Primary) */
.ina-badge--soft.ina-badge--brand {
  background-color: var(--ina-primary-100, var(--ina-neutral-100));
  color: var(--ina-primary-primary, var(--ina-neutral-600));
}
.ina-badge--fill.ina-badge--brand {
  background-color: var(--ina-primary-primary, var(--ina-neutral-600));
  color: var(--ina-primary-25, var(--ina-neutral-25));
}
/* Variant modifiers - Info */
.ina-badge--soft.ina-badge--info {
  background-color: var(--ina-guide-100, var(--ina-blue-100));
  color: var(--ina-guide-600, var(--ina-blue-600));
}
.ina-badge--fill.ina-badge--info {
  background-color: var(--ina-guide-500, var(--ina-blue-500));
  color: var(--ina-guide-50, var(--ina-blue-50));
}
/* Variant modifiers - Warning */
.ina-badge--soft.ina-badge--warning {
  background-color: var(--ina-warning-100, var(--ina-yellow-100));
  color: var(--ina-warning-600, var(--ina-yellow-600));
}
.ina-badge--fill.ina-badge--warning {
  background-color: var(--ina-warning-400, var(--ina-yellow-400));
  color: var(--ina-warning-800, var(--ina-yellow-800));
}
/* Variant modifiers - Success */
.ina-badge--soft.ina-badge--success {
  background-color: var(--ina-positive-100, var(--ina-green-100));
  color: var(--ina-positive-600, var(--ina-green-600));
}
.ina-badge--fill.ina-badge--success {
  background-color: var(--ina-positive-600, var(--ina-green-600));
  color: var(--ina-positive-50, var(--ina-green-50));
}
/* Variant modifiers - Error */
.ina-badge--soft.ina-badge--error {
  background-color: var(--ina-negative-100, var(--ina-red-100));
  color: var(--ina-negative-600, var(--ina-red-600));
}
.ina-badge--fill.ina-badge--error {
  background-color: var(--ina-negative-600, var(--ina-red-600));
  color: var(--ina-negative-50, var(--ina-red-50));
}
/* Variant modifiers - Neutral */
.ina-badge--soft.ina-badge--neutral {
  background-color: var(--ina-background-secondary, var(--ina-neutral-50));
  color: var(--ina-neutral-800, var(--ina-neutral-800));
}
.ina-badge--fill.ina-badge--neutral {
  background-color: var(--ina-neutral-500, var(--ina-neutral-500));
  color: var(--ina-neutral-25, var(--ina-neutral-25));
}
/* Size modifiers */
.ina-badge--sm {
  font-size: var(--ina-font-xs);
  line-height: 14px;
  padding: var(--ina-spacing-1) var(--ina-spacing-2);
}
.ina-badge--md {
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  line-height: var(--ina-line-height-sm);
  padding: var(--ina-spacing-1) var(--ina-spacing-3);
}
.ina-badge--lg {
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  line-height: var(--ina-line-height-sm);
  padding: var(--ina-spacing-1) var(--ina-spacing-3);
}
.ina-badge--xl {
  font-size: var(--ina-font-base);
  font-weight: var(--ina-font-medium);
  line-height: var(--ina-line-height-base);
  padding: var(--ina-spacing-1) var(--ina-spacing-3-5);
}
/* Rounded modifiers */
.ina-badge--rounded-sm {
  border-radius: var(--ina-radius-sm);
}
.ina-badge--rounded-md {
  border-radius: var(--ina-radius-base);
}
.ina-badge--rounded-lg {
  border-radius: var(--ina-radius-lg);
}
.ina-badge--rounded-full {
  border-radius: var(--ina-radius-full); /* Pill shape */
}
/* Hover effects */
.ina-badge--interactive {
  cursor: pointer;
  transition: var(--ina-transition-fast);
}
.ina-badge--interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--ina-shadow-sm);
}
/* Focus styles untuk accessibility */
.ina-badge--interactive:focus {
  outline: 2px solid var(--ina-guide-500);
  outline-offset: 2px;
}
/* Loading state */
.ina-badge--loading {
  position: relative;
  overflow: hidden;
}
.ina-badge--loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: badge-shimmer 1.5s infinite;
}
@keyframes badge-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
/* Disabled state */
.ina-badge--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ina-badge--disabled:hover {
  transform: none;
  box-shadow: none;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  /* .ina-badge--lg {
    font-size: var(--ina-font-sm);
    padding: var(--ina-spacing-1) var(--ina-spacing-3);
  }

  .ina-badge--xl {
    font-size: var(--ina-font-base);
    padding: 0.375rem var(--ina-spacing-4);
  } */
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-badge--outline.ina-badge--positive {
    background-color: rgba(18, 183, 106, 0.1);
    border-color: var(--ina-success-400);
    color: var(--ina-success-400);
  }

  .ina-badge--outline.ina-badge--warning {
    background-color: rgba(247, 144, 9, 0.1);
    border-color: var(--ina-warning-400);
    color: var(--ina-warning-400);
  }

  .ina-badge--outline.ina-badge--info {
    background-color: rgba(40, 113, 255, 0.1);
    border-color: var(--ina-guide-400);
    color: var(--ina-guide-400);
  }

  .ina-badge--outline.ina-badge--negative {
    background-color: rgba(240, 68, 56, 0.1);
    border-color: var(--ina-error-400);
    color: var(--ina-error-400);
  }
} */
/**
 * BasicDropdown Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-basic-dropdown {
  position: relative;
  display: inline-block;
  width: auto;
}
/* Trigger Container */
.ina-basic-dropdown__trigger {
  display: inline-block;
  width: 100%;
}
/* Default Trigger Button (Matches SelectDropdown) */
.ina-basic-dropdown__trigger-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-lg, 0.5rem);
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-4, 1rem);
  background-color: var(--ina-background-primary, #ffffff);
  color: var(--ina-content-primary, #1f1f1f);
  cursor: pointer;
  font-size: var(--ina-font-sm, 0.875rem);
  outline: none;
  transition: all var(--ina-transition-base, 200ms ease-in-out);
  gap: var(--ina-spacing-2, 0.5rem);
  min-height: 40px;
}
.ina-basic-dropdown__trigger-button:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
/* Active/Open State for Trigger Button */
.ina-basic-dropdown__trigger-button--open,
.ina-basic-dropdown__trigger-button:focus-visible {
  border-color: var(--ina-stroke-tertiary, #141414);
  background: var(--ina-background-primary, #ffffff);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
}
.ina-basic-dropdown__trigger-content {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ina-basic-dropdown__trigger-icon {
  flex-shrink: 0;
  color: var(--ina-content-secondary, #525252);
  transition: transform var(--ina-transition-base, 200ms ease-in-out);
}
.ina-basic-dropdown__trigger-button--open .ina-basic-dropdown__trigger-icon {
  transform: rotate(180deg);
}
.ina-basic-dropdown__trigger-button:disabled {
  background-color: transparent;
  color: var(--ina-neutral-400, #a3a3a3);
  cursor: not-allowed;
  opacity: 0.6;
}
/* Panel Container */
.ina-basic-dropdown .ina-basic-dropdown__panel {
  position: absolute;
  z-index: 10004;
  min-width: 100%;
  width: -moz-max-content;
  width: max-content;
  background-color: var(--ina-background-primary, #ffffff);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-lg, 0.5rem);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  margin-top: var(--ina-spacing-2, 0.5rem);
  animation: basicDropdownFadeIn var(--ina-transition-duration-200) ease-out;
}
@keyframes basicDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Positioning variants */
.ina-basic-dropdown__panel--bottom-start {
  top: 100%;
  left: 0;
}
.ina-basic-dropdown__panel--bottom-end {
  top: 100%;
  right: 0;
}
.ina-basic-dropdown__panel--top-start {
  bottom: 100%;
  left: 0;
}
.ina-basic-dropdown__panel--top-end {
  bottom: 100%;
  right: 0;
}
.ina-basic-dropdown__panel--bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.ina-basic-dropdown__panel--top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
/* Responsive adjustments */
@media (max-width: 767px) {
  .ina-basic-dropdown__trigger-button {
    height: 36px;
    font-size: var(--ina-font-xs, 0.75rem);
    padding: var(--ina-spacing-2) var(--ina-spacing-3);
  }
}
dialog.bottom-sheet-dropdown {
  position: fixed;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background-color: var(--ina-background-primary);
  border-width: 0;
  min-height: 50vh;
  max-height: 80vh;
  max-width: 100vw;
  padding: 0;
  border: 0;
  margin: auto 0 0 0 !important;
  width: 100vw;
  bottom: -100%; /* start below the screen */
  z-index: 1000;
  transition: bottom 0.3s ease-in-out; /* smooth animation */
}
.bottom-sheet-dropdown[open] {
  animation: slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.bottom-sheet-dropdown[open].bottom-sheet-dropdown--closing {
  animation: slide-down 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.bottom-sheet-dropdown::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fade-in 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes slide-down {
  from {
    bottom: 0;
  }
  to {
    bottom: -100%;
  }
}
@keyframes slide-up {
  from {
    bottom: -100%;
  }
  to {
    bottom: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* =========================== */
/* BREADCRUMB STYLES           */
/* =========================== */
.ina-breadcrumb {
  display: flex;
  align-items: center;
}
.ina-breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: var(--ina-spacing-1);
}
.ina-breadcrumb__item {
  display: flex;
  align-items: center;
}
.ina-breadcrumb__link {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-1);
  text-decoration: none;
  font-size: var(--ina-font-xs);
  transition: color var(--ina-transition-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Text size: text-xs md:text-sm */
@media (min-width: 768px) {
  .ina-breadcrumb__link {
    font-size: var(--ina-font-sm);
  }
}
/* Inactive link: text-content-secondary, font-normal */
.ina-breadcrumb__link {
  color: var(--ina-content-secondary);
  font-weight: var(--ina-font-normal);
}
/* Active link: text-content-primary, font-medium */
.ina-breadcrumb__link--active {
  color: var(--ina-content-primary);
  font-weight: var(--ina-font-medium);
}
.ina-breadcrumb__link:hover:not(.ina-breadcrumb__link--active):not(
    .ina-breadcrumb__link--disabled
  ) {
  color: var(--ina-content-primary);
  text-decoration: underline;
}
.ina-breadcrumb__link:focus-visible:not(.ina-breadcrumb__link--disabled) {
  outline: 2px solid var(--ina-primary-600, #0968f6);
  outline-offset: 2px;
  background-color: var(--ina-neutral-100);
  border-radius: var(--ina-radius-sm, 4px);
}
.ina-breadcrumb__link--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.ina-breadcrumb__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ina-breadcrumb__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Separator: text-content-secondary */
.ina-breadcrumb__separator {
  display: flex;
  align-items: center;
  color: var(--ina-content-secondary);
  margin: 0 var(--ina-spacing-1);
  flex-shrink: 0;
  font-size: var(--ina-font-xs);
}
@media (min-width: 768px) {
  .ina-breadcrumb__separator {
    font-size: var(--ina-font-sm);
  }
}
/**
 * Button Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-" dan hierarchy/size modifiers
 */
.ina-button {
  /* Base button styling */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  border-radius: 8px;
  transition: all 150ms ease-in-out;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  gap: 8px;
  flex-shrink: 0;
}
.ina-button__prefix-icon,
.ina-button__suffix-icon {
  /* Icon containers */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Size modifiers */
.ina-button--2xl {
  max-height: 56px;
  font-size: 16px;
  line-height: 24px;
  padding: 16px;
}
.ina-button--xl {
  max-height: 48px;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 16px;
}
.ina-button--lg {
  max-height: 44px;
  font-size: 14px;
  line-height: 20px;
  padding: 12px;
}
.ina-button--md {
  max-height: 40px;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 12px;
}
.ina-button--sm {
  max-height: 32px;
  font-size: 12px;
  line-height: 16px;
  padding: 8px;
  border-radius: 6px;
}
.ina-button.ina-button--md {
  border-radius: 7px;
}
.ina-button.ina-button--sm {
  border-radius: 6px;
}
@media (max-width: 639px) {
  /* Size modifiers */
  .ina-button--2xl {
    max-height: 48px;
    font-size: 14px;
    line-height: 20px;
    padding: 12px 16px;
  }

  .ina-button--xl {
    max-height: 44px;
    font-size: 14px;
    line-height: 24px;
    padding: 10px 12px;
  }

  .ina-button--lg {
    max-height: 40px;
    font-size: 12px;
    line-height: 16px;
    padding: 10px 12px;
  }

  .ina-button--md {
    max-height: 32px;
    font-size: 12px;
    line-height: 16px;
    padding: 8px;
  }

  .ina-button--sm {
    max-height: 28px;
    font-size: 10px;
    line-height: 12px;
    padding: 6px 8px;
  }
}
/* Hierarchy modifiers - Primary */
.ina-button--primary {
  background-color: var(--ina-primary-primary);
  color: var(--ina-base-white, var(--ina-neutral-25));
  border: none;
}
.ina-button--primary:hover:not(:disabled) {
  background-color: color-mix(
    in srgb,
    var(--ina-primary-primary, var(--ina-content-primary)) 90%,
    transparent
  );
}
.ina-button--primary:focus:not(:disabled) {
  background-color: color-mix(
    in srgb,
    var(--ina-primary-primary, var(--ina-content-primary)) 90%,
    transparent
  );
  box-shadow:
    0 0 0 2px var(--ina-background-primary, #ffffff),
    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  outline-offset: 2px;
}
.ina-button--primary:disabled {
  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
  color: var(--ina-content-tertiary, var(--ina-neutral-400));
  cursor: not-allowed;
  opacity: 1;
}
/* Hierarchy modifiers - Secondary */
.ina-button--secondary {
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  color: var(--ina-content-primary, var(--ina-neutral-800));
  border: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
}
.ina-button--secondary:hover:not(:disabled) {
  background-color: var(--ina-background-secondary, var(--ina-neutral-50));
}
.ina-button--secondary:focus:not(:disabled) {
  background-color: var(--ina-background-secondary, var(--ina-neutral-50));
  box-shadow:
    0 0 0 2px var(--ina-background-primary, #ffffff),
    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  outline-offset: 2px;
}
.ina-button--secondary:disabled {
  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
  color: var(--ina-content-tertiary, var(--ina-neutral-400));
  border-color: var(--ina-stroke-primary, var(--ina-neutral-200));
  cursor: not-allowed;
  opacity: 1;
}
/* Hierarchy modifiers - Tertiary */
.ina-button--tertiary {
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  color: var(--ina-content-primary, var(--ina-neutral-800));
  border: none;
}
.ina-button--tertiary:hover:not(:disabled) {
  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
}
.ina-button--tertiary:focus:not(:disabled) {
  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
  box-shadow:
    0 0 0 2px var(--ina-background-primary, #ffffff),
    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  outline-offset: 2px;
}
.ina-button--tertiary:disabled {
  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
  color: var(--ina-content-tertiary, var(--ina-neutral-400));
  cursor: not-allowed;
  opacity: 1;
}
/* Hierarchy modifiers - Link */
.ina-button--link {
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  color: var(--ina-content-guide, var(--ina-blue-400));
  border: none;
  text-decoration: none;
}
.ina-button.ina-button--link {
  padding: 0;
}
.ina-button--link:hover:not(:disabled) {
  color: var(--ina-guide-400, var(--ina-blue-400));
}
.ina-button--link:focus:not(:disabled) {
  color: var(--ina-guide-400, var(--ina-blue-400));
  box-shadow:
    0 0 0 2px var(--ina-background-primary, #ffffff),
    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  outline-offset: 2px;
  text-decoration: underline;
}
.ina-button--link:disabled {
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  color: var(--ina-content-tertiary, var(--ina-neutral-400));
  cursor: not-allowed;
  opacity: 1;
}
/* Hierarchy modifiers - Custom */
.ina-button--custom {
  /* Custom variant tidak ada default styling, semua styling berdasarkan user */
  cursor: pointer;
}
.ina-button--custom:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* Loading state */
.ina-button--loading {
  position: relative;
  pointer-events: none;
}
/* Icon styling */
.ina-button__prefix-icon svg,
.ina-button__suffix-icon svg {
  display: inline-block;
  vertical-align: middle;
}
/* =========================== */
/* BUTTON GROUP STYLES */
/* =========================== */
.ina-button-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ina-stroke-primary);
  border-radius: 8px;
  background-color: var(--ina-background-primary);
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  transition: border-color 0.2s ease;
}
.ina-button-group--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ina-button-group__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-semibold);
  line-height: var(--ina-line-height-sm);
  color: var(--ina-content-secondary);
  background-color: var(--ina-background-primary);
  border: none;
  border-right: 1px solid var(--ina-stroke-primary);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ina-button-group__button:first-child {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.ina-button-group__button:last-child {
  border-right: none;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}
.ina-button-group__button:hover:not(.ina-button-group__button--disabled) {
  background-color: var(--ina-primary-25);
}
.ina-button-group__button:focus-visible:not(
    .ina-button-group__button--disabled
  ) {
  background-color: var(--ina-primary-25);
  border: 2px solid var(--ina-primary-600, #0968f6);
}
/* Focus states */
.ina-button-group__button:focus:not(.ina-button-group__button--disabled) {
  border: 1px solid var(--ina-primary-600, #0968f6);
}
.ina-button-group__button--selected {
  background-color: var(--ina-primary-25);
  color: var(--ina-primary-primary);
}
.ina-button-group__button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ina-button-group__button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 767px) {
  .ina-button-group__button {
    height: 32px;
    padding: 0 12px;
    font-size: var(--ina-font-xs);
    line-height: var(--ina-line-height-xs);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ina-button-group__button {
    font-size: 14px;
    padding: 0 14px;
  }
}
/* Active states */
.ina-button-group__button:active:not(.ina-button-group__button--disabled) {
  background-color: var(--ina-neutral-200);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ina-button-group__button--selected:active:not(
    .ina-button-group__button--disabled
  ) {
  background-color: var(--ina-neutral-300);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Dark mode */
[data-theme='dark'] .ina-button-group {
  border-color: var(--ina-stroke-primary);
  background-color: var(--ina-background-primary);
}
[data-theme='dark'] .ina-button-group__button {
  color: var(--ina-content-secondary);
  background-color: var(--ina-background-primary);
  border-right-color: var(--ina-stroke-primary);
}
[data-theme='dark']
  .ina-button-group__button:hover:not(.ina-button-group__button--disabled) {
  background-color: var(--ina-primary-primary);
}
[data-theme='dark']
  .ina-button-group__button:focus-visible:not(
    .ina-button-group__button--disabled
  ) {
  background-color: var(--ina-primary-primary);
  border: 2px solid var(--ina-primary-25, #ffffff);
}
/* Focus states */
[data-theme='dark']
  .ina-button-group__button:focus:not(.ina-button-group__button--disabled) {
  border: 1px solid var(--ina-primary-25, #ffffff);
}
[data-theme='dark'] .ina-button-group__button--selected {
  background-color: var(--ina-primary-primary);
  color: var(--ina-primary-25);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-button-group__button {
    transition: none;
  }
}
/**
 * Card Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 * Varian: Basic (Vertical), Horizontal, Overlay
 */
/* =========================== */
/* BASE CARD STYLES            */
/* =========================== */
.ina-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  border-radius: var(--ina-radius-lg, 8px);
  border: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
  box-sizing: border-box;
  transition: all 0.2s ease;
  overflow: hidden;
  width: 100%;
}
/* =========================== */
/* VARIANT: BASIC (VERTICAL)   */
/* =========================== */
/* Basic Card - Media Position: Bottom (default) */
.ina-card--variant-basic.ina-card--media-bottom {
  flex-direction: column;
}
/* Basic Card - Media Position: Top */
.ina-card--variant-basic.ina-card--media-top {
  flex-direction: column;
}
/* Ensure content order is correct for basic card */
.ina-card--variant-basic.ina-card--media-bottom .ina-card__content {
  order: 1;
}
.ina-card--variant-basic.ina-card--media-bottom .ina-card__media {
  order: 2;
}
.ina-card--variant-basic.ina-card--media-top .ina-card__content {
  order: 2;
}
.ina-card--variant-basic.ina-card--media-top .ina-card__media {
  order: 1;
}
/* =========================== */
/* VARIANT: HORIZONTAL         */
/* =========================== */
.ina-card--variant-horizontal {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
}
/* Horizontal Card - Media Position: Right (default) */
.ina-card--variant-horizontal.ina-card--media-right {
  flex-direction: row;
}
/* Horizontal Card - Media Position: Left */
.ina-card--variant-horizontal.ina-card--media-left {
  flex-direction: row;
}
/* Ensure content and media order for horizontal card */
.ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
  order: 1 !important;
  flex: 1;
  min-width: 0;
  width: auto;
}
.ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
  order: 2 !important;
  flex-shrink: 0;
  flex-grow: 0;
}
.ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
  order: 2 !important;
  flex: 1;
  min-width: 0;
  width: auto;
}
.ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
  order: 1 !important;
  flex-shrink: 0;
  flex-grow: 0;
}
/* =========================== */
/* VARIANT: OVERLAY            */
/* =========================== */
.ina-card--variant-overlay {
  position: relative;
  width: 360px;
  height: 362px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
/* Overlay Card - Media Position: Top (default) */
.ina-card--variant-overlay.ina-card--media-top {
  flex-direction: column;
}
/* Overlay Card - Media Position: Bottom */
.ina-card--variant-overlay.ina-card--media-bottom {
  flex-direction: column;
}
/* =========================== */
/* CARD ANATOMY ELEMENTS       */
/* =========================== */
/* Avatar */
.ina-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--ina-radius-full, 9999px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Content Container */
.ina-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-4, 16px);
  flex: 1;
  padding: var(--ina-spacing-6, 24px);
}
/* Content width untuk basic dan overlay card */
.ina-card--variant-basic .ina-card__content,
.ina-card--variant-overlay .ina-card__content {
  width: 100%;
}
/* Content width untuk horizontal card - tidak 100% agar tidak overlap dengan media */
.ina-card--variant-horizontal .ina-card__content {
  width: auto;
}
/* Title */
.ina-card__title {
  font-size: var(--ina-font-xl, 20px);
  font-weight: var(--ina-font-semibold, 600);
  line-height: var(--ina-line-height-lg, 28px);
  color: var(--ina-content-primary, var(--ina-neutral-800));
  margin: 0;
  margin-bottom: var(--ina-spacing-1, 4px);
}
/* Description */
.ina-card__description {
  font-size: var(--ina-font-base, 16px);
  font-weight: var(--ina-font-normal, 400);
  line-height: var(--ina-line-height-base, 24px);
  color: var(--ina-content-secondary, var(--ina-neutral-600));
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: stretch;
}
/* Button Container */
.ina-card__button {
  width: 100%;
  display: flex;
  align-items: center;
}
/* Media Container */
.ina-card__media {
  width: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}
/* Media Image */
.ina-card__media img,
.ina-card__media video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  max-width: 100%;
}
/* Horizontal Card Media Image - ensure no overflow */
.ina-card--variant-horizontal .ina-card__media img,
.ina-card--variant-horizontal .ina-card__media video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  max-width: 100%;
  max-height: 100%;
}
/* Basic Card Media */
.ina-card--variant-basic .ina-card__media {
  aspect-ratio: 16 / 9;
  max-height: 202px;
}
/* Horizontal Card Media */
.ina-card--variant-horizontal .ina-card__media {
  width: 264px;
  min-width: 264px;
  max-width: 264px;
  height: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
/* Horizontal Card Content - sudah didefinisikan di atas, tidak perlu duplikasi */
/* Overlay Card Media */
.ina-card--variant-overlay .ina-card__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* Overlay Card - Gradient overlay based on media position */
.ina-card--variant-overlay.ina-card--media-top .ina-card__media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.9) 60%,
    transparent 100%
  );
  pointer-events: none;
}
.ina-card--variant-overlay.ina-card--media-bottom .ina-card__media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.9) 60%,
    transparent 100%
  );
  pointer-events: none;
}
/* Overlay Card Content */
.ina-card--variant-overlay .ina-card__content {
  position: relative;
  z-index: 1;
  padding: var(--ina-spacing-6, 24px);
  height: 100%;
  gap: var(--ina-spacing-4, 16px);
}
/* Overlay Card - Content position based on media position */
.ina-card--variant-overlay.ina-card--media-top .ina-card__content {
  justify-content: flex-end;
}
.ina-card--variant-overlay.ina-card--media-bottom .ina-card__content {
  justify-content: flex-start;
}
.ina-card--variant-overlay .ina-card__avatar,
.ina-card--variant-overlay .ina-card__title,
.ina-card--variant-overlay .ina-card__description {
  color: var(--ina-neutral-25, #ffffff);
}
/* =========================== */
/* RESPONSIVE DESIGN           */
/* =========================== */
/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
  /* Basic Card */
  .ina-card--variant-basic {
    width: 100%;
    max-width: 400px;
  }

  .ina-card--variant-basic .ina-card__avatar {
    width: 40px;
    height: 40px;
  }

  .ina-card--variant-basic .ina-card__title {
    font-size: var(--ina-font-lg, 18px);
    line-height: var(--ina-line-height-base, 24px);
  }

  .ina-card--variant-basic .ina-card__description {
    font-size: var(--ina-font-sm, 14px);
    line-height: var(--ina-line-height-sm, 20px);
  }

  /* Horizontal Card */
  .ina-card--variant-horizontal {
    flex-direction: column !important;
    max-width: 100%;
  }

  /* Override semua property desktop untuk horizontal card media di mobile */
  .ina-card--variant-horizontal .ina-card__media {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 202px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* Override content width untuk mobile */
  .ina-card--variant-horizontal .ina-card__content {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
  .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
    order: 1 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
    order: 2 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
  .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
    order: 1 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
    order: 2 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .ina-card--variant-horizontal .ina-card__avatar {
    width: 40px;
    height: 40px;
  }

  .ina-card--variant-horizontal .ina-card__title {
    font-size: var(--ina-font-lg, 18px);
    line-height: var(--ina-line-height-base, 24px);
  }

  .ina-card--variant-horizontal .ina-card__description {
    font-size: var(--ina-font-sm, 14px);
    line-height: var(--ina-line-height-sm, 20px);
  }

  /* Overlay Card */
  .ina-card--variant-overlay {
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 362px;
  }

  .ina-card--variant-overlay .ina-card__content {
    padding: var(--ina-spacing-16, 16px);
    gap: var(--ina-spacing-3, 12px);
  }

  .ina-card--variant-overlay .ina-card__avatar {
    width: 40px;
    height: 40px;
  }

  .ina-card--variant-overlay .ina-card__title {
    font-size: var(--ina-font-lg, 18px);
    line-height: var(--ina-line-height-base, 24px);
  }

  .ina-card--variant-overlay .ina-card__description {
    font-size: var(--ina-font-sm, 14px);
    line-height: var(--ina-line-height-sm, 20px);
  }
}
/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
  /* Basic Card */
  .ina-card--variant-basic {
    width: 100%;
    max-width: 100%;
  }

  .ina-card--variant-basic .ina-card__avatar {
    width: 36px;
    height: 36px;
  }

  .ina-card--variant-basic .ina-card__title {
    font-size: var(--ina-font-base, 16px);
    line-height: var(--ina-line-height-sm, 20px);
  }

  .ina-card--variant-basic .ina-card__description {
    font-size: var(--ina-font-xs, 12px);
    line-height: var(--ina-line-height-xs, 16px);
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* Horizontal Card */
  .ina-card--variant-horizontal {
    flex-direction: column !important;
    gap: var(--ina-spacing-4, 16px);
  }

  /* Override semua property desktop untuk horizontal card media di mobile */
  .ina-card--variant-horizontal .ina-card__media {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 202px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* Override content width untuk mobile */
  .ina-card--variant-horizontal .ina-card__content {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
  .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
    order: 1 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
    order: 2 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
  .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
    order: 1 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
    order: 2 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .ina-card--variant-horizontal .ina-card__avatar {
    width: 36px;
    height: 36px;
  }

  .ina-card--variant-horizontal .ina-card__title {
    font-size: var(--ina-font-base, 16px);
    line-height: var(--ina-line-height-sm, 20px);
  }

  .ina-card--variant-horizontal .ina-card__description {
    font-size: var(--ina-font-xs, 12px);
    line-height: var(--ina-line-height-xs, 16px);
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* Overlay Card */
  .ina-card--variant-overlay {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 300px;
  }

  .ina-card--variant-overlay .ina-card__content {
    padding: var(--ina-spacing-4, 16px);
    gap: var(--ina-spacing-2, 8px);
  }

  .ina-card--variant-overlay .ina-card__avatar {
    width: 36px;
    height: 36px;
  }

  .ina-card--variant-overlay .ina-card__title {
    font-size: var(--ina-font-base, 16px);
    line-height: var(--ina-line-height-sm, 20px);
  }

  .ina-card--variant-overlay .ina-card__description {
    font-size: var(--ina-font-xs, 12px);
    line-height: var(--ina-line-height-xs, 16px);
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .ina-card__content {
    padding: var(--ina-spacing-3, 12px);
  }
}
/**
 * Card Plain Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 * Ini adalah komponen card sederhana yang hanya berfungsi sebagai container dengan border dan radius
 */
.ina-card-plain {
  display: flex;
  flex-direction: column;
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  border-radius: var(--ina-radius-lg, 8px);
  border: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--ina-spacing-3, 12px);
  width: 100%;
}
@media screen and (min-width: 640px) {
  .ina-card-plain {
    padding: var(--ina-spacing-4, 16px);
  }
}
@media screen and (min-width: 1024px) {
  .ina-card-plain {
    padding: var(--ina-spacing-5, 20px);
  }
}
@media screen and (min-width: 1280px) {
  .ina-card-plain {
    padding: var(--ina-spacing-6, 24px);
  }
}
/* Carousel Component Styles */
.ina-carousel {
  position: relative;
  width: 100%;
}
.ina-carousel__title {
  font-size: var(--ina-font-size-lg);
  font-weight: var(--ina-font-weight-semibold);
  color: var(--ina-color-text-primary);
  margin-bottom: var(--ina-spacing-md);
}
.ina-carousel__container {
  position: relative;
  overflow: hidden;
  border-radius: var(--ina-border-radius-md);
}
.ina-carousel__wrapper {
  display: flex;
  transition: transform 0.3s ease;
}
.ina-carousel__item {
  flex: 0 0 auto;
  width: 100%;
}
.ina-carousel__item--active {
  /* Active item styles */
}
.ina-carousel__item-content {
  padding: var(--ina-spacing-lg);
  text-align: center;
  background: var(--ina-color-background);
  border-radius: var(--ina-border-radius-md);
  margin: var(--ina-spacing-xs);
}
.ina-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ina-color-background);
  border: 1px solid var(--ina-color-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}
.ina-carousel__nav:hover {
  background: var(--ina-color-surface);
  border-color: var(--ina-color-primary);
}
.ina-carousel__nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ina-carousel__nav--prev {
  left: var(--ina-spacing-sm);
}
.ina-carousel__nav--next {
  right: var(--ina-spacing-sm);
}
.ina-carousel__indicators {
  display: flex;
  justify-content: center;
  gap: var(--ina-spacing-xs);
  margin-top: var(--ina-spacing-md);
}
.ina-carousel__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ina-color-border);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ina-carousel__indicator--active {
  background: var(--ina-color-primary);
}
.ina-carousel__indicator:hover {
  background: var(--ina-color-primary-light);
}
/* Chart Component Styles */
.ina-chart {
  background: var(--ina-color-background);
  border-radius: var(--ina-border-radius-md);
  padding: var(--ina-spacing-md);
}
.ina-chart__title {
  font-size: var(--ina-font-size-lg);
  font-weight: var(--ina-font-weight-semibold);
  color: var(--ina-color-text-primary);
  margin-bottom: var(--ina-spacing-xs);
}
.ina-chart__subtitle {
  font-size: var(--ina-font-size-sm);
  color: var(--ina-color-text-secondary);
  margin-bottom: var(--ina-spacing-md);
}
.ina-chart__container {
  position: relative;
  width: 100%;
  height: 300px;
}
.ina-chart__canvas {
  width: 100%;
  height: 100%;
}
.ina-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ina-spacing-md);
  margin-top: var(--ina-spacing-md);
  padding-top: var(--ina-spacing-md);
  border-top: 1px solid var(--ina-color-border);
}
.ina-chart__legend-item {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-xs);
  cursor: pointer;
  padding: var(--ina-spacing-xs);
  border-radius: var(--ina-border-radius-sm);
  transition: background-color 0.2s ease;
}
.ina-chart__legend-item:hover {
  background: var(--ina-color-surface);
}
.ina-chart__legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.ina-chart__legend-label {
  font-size: var(--ina-font-size-sm);
  color: var(--ina-color-text-primary);
}
.ina-chart__status {
  margin-top: var(--ina-spacing-sm);
  font-size: var(--ina-font-size-sm);
}
.ina-chart__status--success {
  color: var(--ina-color-success);
}
.ina-chart__status--error {
  color: var(--ina-color-error);
}
.ina-chart__status--warning {
  color: var(--ina-color-warning);
}
/**
 * Checkbox Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-" dan state modifiers
 */
.ina-checkbox {
  /* Main container - label wrapper */
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-3, 0.75rem);
}
.ina-checkbox.ina-checkbox--with-subtext {
  /* Align items to flex-start when subtext is present */
  align-items: flex-start;
}
.ina-checkbox__input {
  /* Hidden native input */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ina-checkbox__box {
  /* Visual checkbox box */
  flex-shrink: 0;
  width: 1rem; /* w-4 */
  height: 1rem; /* h-4 */
  max-width: 1rem;
  max-height: 1rem;
  font-size: var(--ina-font-2xs, 0.625rem);
  color: var(--ina-white, #fff);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  background-color: var(--ina-background-primary, #ffffff);
  border-radius: var(--ina-radius-base, 0.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 150ms ease-in-out,
    border-color 150ms ease-in-out;
}
@media (min-width: 768px) {
  .ina-checkbox__box {
    width: 1.25rem; /* md:w-5 */
    height: 1.25rem; /* md:h-5 */
  }
}
.ina-checkbox__content {
  /* Container untuk label dan subtext */
  display: flex;
  flex-direction: column;
}
.ina-checkbox__label {
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-content-primary, #1f1f1f);
  margin: 0;
}
@media (min-width: 768px) {
  .ina-checkbox__label {
    font-size: var(--ina-font-base); /* md:text-base */
  }
}
.ina-checkbox__subtext {
  font-size: var(--ina-font-xs, 0.75rem);
  color: var(--ina-content-secondary, #525252);
  margin-top: 0.125rem;
  margin: 0;
}
@media (min-width: 768px) {
  .ina-checkbox__subtext {
    font-size: var(--ina-font-sm); /* md:text-sm */
  }
}
/* Modifier for checked state */
.ina-checkbox__box--checked {
  background-color: var(--ina-content-primary, #1f1f1f);
  border-color: var(--ina-content-primary, #1f1f1f);
}
/* Modifier for indeterminate state */
.ina-checkbox__box--indeterminate {
  background-color: var(--ina-content-primary, #1f1f1f);
  border-color: var(--ina-content-primary, #1f1f1f);
}
/* Modifier for invalid state */
.ina-checkbox__box--invalid {
  border-color: var(
    --ina-sentiment-negative-500,
    var(--ina-error-500, #f02d2d)
  ) !important;
}
/* Modifier for disabled state */
.ina-checkbox--disabled {
  cursor: not-allowed;
}
.ina-checkbox--disabled .ina-checkbox__box--unchecked,
.ina-checkbox--disabled .ina-checkbox__box--checked,
.ina-checkbox--disabled .ina-checkbox__box--indeterminate {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  border-color: var(--ina-stroke-secondary, #a3a3a3);
}
.ina-checkbox--disabled .ina-checkbox__box--unchecked {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  border-color: var(--ina-stroke-secondary, #a3a3a3);
}
.ina-checkbox--disabled .ina-checkbox__label {
  color: var(--ina-content-primary, #1f1f1f);
}
.ina-checkbox--disabled .ina-checkbox__icon {
  color: var(--ina-stroke-secondary, #a3a3a3);
}
/* Default unchecked state hover effect */
.ina-checkbox__box--unchecked:hover {
  border-color: var(--ina-stroke-secondary, #a3a3a3);
}
/* Icon styling */
.ina-checkbox__icon {
  color: var(--ina-white, #ffffff); /* white */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Disabled icon color */
.ina-checkbox--disabled .ina-checkbox__icon {
  color: var(--ina-neutral-400, #a3a3a3);
}
/* Focus state menggunakan peer selector untuk accessibility */
/* Focus state menggunakan peer selector untuk accessibility */
.ina-checkbox__input:focus + .ina-checkbox__box {
  outline: none;
  box-shadow:
    inset 0 0 0 1px #fff,
    inset 0 0 0 2px var(--ina-content-primary, #1f1f1f);
}
/* Focus state untuk indeterminate checkbox */
.ina-checkbox__input:focus + .ina-checkbox__box--indeterminate {
  outline: none;
  box-shadow:
    inset 0 0 0 1px #fff,
    inset 0 0 0 2px var(--ina-content-primary, #1f1f1f);
}
/* Focus state untuk checked checkbox */
.ina-checkbox__input:focus + .ina-checkbox__box--checked {
  outline: none;
  box-shadow:
    inset 0 0 0 1px #fff,
    inset 0 0 0 2px var(--ina-content-primary, #1f1f1f);
}
/* Invalid state yang tidak disabled */
.ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
  border-color: var(--ina-negative-600, var(--ina-error-600, #f02d2d));
}
/* Interactive states */
.ina-checkbox:not(.ina-checkbox--disabled) {
  cursor: pointer;
}
.ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box {
  cursor: pointer;
}
.ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__label {
  cursor: pointer;
}
/* Animation untuk transisi state */
.ina-checkbox__icon {
  transition: color 150ms ease-in-out;
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .ina-checkbox__box,
  .ina-checkbox__icon {
    transition: none;
  }
}
/* High contrast mode support */
@media (prefers-contrast: high) {
  .ina-checkbox__box {
    border-width: 2px;
  }

  .ina-checkbox__box--checked,
  .ina-checkbox__box--indeterminate {
    border-width: 2px;
  }
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-checkbox__box {
    border-color: var(--ina-neutral-600);
    background-color: var(--ina-neutral-900);
  }

  .ina-checkbox__box--unchecked:hover {
    border-color: var(--ina-neutral-500);
  }

  .ina-checkbox__box--invalid {
    border-color: var(--ina-error-400) !important;
  }
} */
/**
 * Chip Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 * Sesuai dengan design system Figma
 */
.ina-chip {
  /* Main container */
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-2);
}
.ina-chip__list {
  /* Container untuk semua chips */
  display: flex;
  flex-wrap: wrap;
  gap: var(--ina-spacing-2);
}
.ina-chip__item {
  /* Base styles */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ina-radius-full);
  font-weight: 500;
  border: 1px solid;
  transition:
    background-color 150ms ease-in-out,
    border-color 150ms ease-in-out,
    color 150ms ease-in-out;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
}
/* Size: Small */
.ina-chip__item--size-small {
  height: 24px;
  font-size: 12px;
  padding: 0 10px;
}
/* Size: Medium */
.ina-chip__item--size-medium {
  height: 32px;
  font-size: 14px;
  padding: 0 12px;
}
/* ============================================
   FILLED VARIANT
   ============================================ */
/* Filled - Default State */
.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(
    .ina-chip__item--disabled
  ) {
  background-color: var(--ina-primary-25);
  color: var(--ina-content-primary);
  border-color: var(--ina-primary-25);
}
/* Filled - Hover State */
.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(
    .ina-chip__item--disabled
  ):hover {
  background-color: var(--ina-primary-50, #f8f8f7);
  color: var(--ina-content-primary);
  border-color: var(--ina-primary-25);
}
.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(
    .ina-chip__item--disabled
  ):focus-visible {
  background-color: var(--ina-primary-50, #f8f8f7);
  border: 2px solid var(--ina-primary-600, #0968f6);
}
/* Filled - Selected State */
.ina-chip__item--variant-filled.ina-chip__item--selected {
  background-color: var(--ina-primary-300);
  color: var(--ina-neutral-25, #ffffff);
  border-color: var(--ina-primary-300);
}
/* Filled - Disabled State */
.ina-chip__item--variant-filled.ina-chip__item--disabled {
  background-color: var(--ina-background-tertiary, #f2f2f2);
  color: var(--ina-content-tertiary);
  border-color: var(--ina-background-tertiary, #f2f2f2);
  cursor: not-allowed;
  pointer-events: none;
}
/* ============================================
   OUTLINE VARIANT
   ============================================ */
/* Outline - Default State */
.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(
    .ina-chip__item--disabled
  ) {
  background-color: var(--ina-neutral-25, #ffffff);
  color: var(--ina-content-primary);
  border-color: var(--ina-stroke-primary);
}
/* Outline - Hover State */
.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(
    .ina-chip__item--disabled
  ):hover {
  background-color: var(--ina-primary-25, #f8f8f7);
  color: var(--ina-content-primary);
  border-color: var(--ina-stroke-primary);
}
.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(
    .ina-chip__item--disabled
  ):focus-visible {
  background-color: var(--ina-primary-25, #f8f8f7);
  border: 2px solid var(--ina-primary-600, #0968f6);
}
/* Outline - Selected State */
.ina-chip__item--variant-outline.ina-chip__item--selected {
  background-color: var(--ina-primary-25);
  color: var(--ina-primary-600);
  border-color: var(--ina-primary-600);
}
/* Outline - Disabled State */
.ina-chip__item--variant-outline.ina-chip__item--disabled {
  background-color: var(--ina-background-tertiary, #f2f2f2);
  color: var(--ina-content-tertiary);
  border-color: var(--ina-stroke-primary);
  cursor: not-allowed;
  pointer-events: none;
}
/* Active/pressed state */
.ina-chip__item:active:not(.ina-chip__item--disabled) {
  transform: scale(0.98);
}
/* Custom field styling */
.ina-chip__custom-field {
  margin-top: var(--ina-spacing-2);
}
.ina-chip__custom-field .ina-chip__input-wrapper {
  max-width: 50%; /* sm:max-w-1/2 */
}
@media (min-width: 768px) {
  .ina-chip__custom-field .ina-chip__input-wrapper {
    max-width: 25%; /* md:max-w-1/4 */
  }
}
/* Loading state */
.ina-chip__item--loading {
  position: relative;
  pointer-events: none;
}
.ina-chip__item--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid transparent;
  border-top: 1px solid currentColor;
  border-radius: 50%;
  animation: chip-spin 1s linear infinite;
}
@keyframes chip-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ina-chip__list {
    gap: var(--ina-spacing-1);
  }

  .ina-chip__custom-field .ina-chip__input-wrapper {
    max-width: 100%; /* Full width on small screens */
  }
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .ina-chip__item,
  .ina-chip__item:active {
    transition: none;
    transform: none;
  }

  .ina-chip__item--loading::after {
    animation: none;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-chip__item {
    border-width: 2px;
  }

  .ina-chip__item:focus-visible {
    outline-width: 3px;
  }
}
/* Animation untuk chip appearance */
.ina-chip__item {
  animation: chip-fade-in 150ms ease-out;
}
@keyframes chip-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 640px) {
  .ina-chip__input-wrapper {
    min-width: 100%;
  }
}
/* Custom Native Input styles matching TextField */
.ina-chip__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2);
  border-radius: var(--ina-radius-lg);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
  background-color: var(--ina-background-primary, #ffffff);
  transition: all var(--ina-transition-base);
  height: 40px; /* size-sm equivalent */
  box-sizing: border-box;
}
.ina-chip__input-wrapper:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
.ina-chip__input-wrapper:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
.ina-chip__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--ina-font-sm);
  font-family: inherit;
  color: var(--ina-content-primary);
  width: 100%;
}
.ina-chip__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-chip__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-chip__clear-button {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-secondary, #525252);
  transition: color var(--ina-transition-base);
}
.ina-chip__clear-button:hover:not(:disabled) {
  color: var(--ina-content-secondary, #525252);
}
.ina-chip__clear-icon {
  width: 16px;
  height: 16px;
}
/**
 * CircleProgressBar Component Styles
 * Prefix "ina-" based on BEM styling
 */
.ina-circle-progress-bar {
  /* Default variables */
  --ina-circle-progress-size: 20px;
  --ina-circle-progress-track-color: var(--ina-background-tertiary, #f5f5f5);
  --ina-circle-progress-color: var(--ina-primary-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ina-circle-progress-size);
  height: var(--ina-circle-progress-size);
}
.ina-circle-progress-bar__svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.ina-circle-progress-bar__track {
  stroke: var(--ina-circle-progress-track-color);
  fill: none;
}
.ina-circle-progress-bar__progress {
  stroke: var(--ina-circle-progress-color);
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}
/* Variants */
.ina-circle-progress-bar--primary {
  --ina-circle-progress-color: var(--ina-primary-primary);
}
.ina-circle-progress-bar--secondary {
  --ina-circle-progress-color: var(--ina-primary-700);
}
.ina-circle-progress-bar--positive {
  --ina-circle-progress-color: var(--ina-positive-600);
}
.ina-circle-progress-bar--warning {
  --ina-circle-progress-color: var(--ina-warning-500);
}
.ina-circle-progress-bar--negative {
  --ina-circle-progress-color: var(--ina-negative-500);
}
/**
 * Collapse Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-collapse {
  /* Base collapse container */
  overflow: hidden;
  transition: max-height var(--ina-transition-base);
}
/* Animation states */
.ina-collapse--entering {
  max-height: 0;
}
.ina-collapse--entered {
  max-height: 1000px; /* Adjust as needed, or use auto */
}
.ina-collapse--exiting {
  max-height: 0;
}
/* Smooth height transitions */
.ina-collapse--auto {
  max-height: auto;
}
/* Customizable animation durations */
.ina-collapse--slow {
  transition-duration: 3000ms;
}
.ina-collapse--fast {
  transition-duration: 150ms;
}
.ina-collapse--instant {
  transition-duration: 0ms;
}
/* Height-based variants */
.ina-collapse--small {
  max-height: 200px;
}
.ina-collapse--medium {
  max-height: 400px;
}
.ina-collapse--large {
  max-height: 600px;
}
.ina-collapse--xl {
  max-height: 800px;
}
/* Content wrapper */
.ina-collapse__content {
  /* Add any specific content styling here */
}
/* Animation easing variants */
.ina-collapse--ease-in {
  transition-timing-function: ease-in;
}
.ina-collapse--ease-out {
  transition-timing-function: ease-out;
}
.ina-collapse--ease-in-out {
  transition-timing-function: ease-in-out;
}
.ina-collapse--ease-linear {
  transition-timing-function: linear;
}
.ina-collapse--ease-cubic {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Confirmation Component Styles */
.ina-confirmation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ina-confirmation__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.ina-confirmation__container {
  position: relative;
  z-index: 1001;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}
.ina-confirmation__dialog {
  background: var(--ina-color-background);
  border-radius: var(--ina-border-radius-lg);
  box-shadow: var(--ina-shadow-xl);
  overflow: hidden;
}
.ina-confirmation__header {
  display: flex;
  align-items: flex-start;
  gap: var(--ina-spacing-md);
  padding: var(--ina-spacing-lg);
}
.ina-confirmation__icon {
  flex-shrink: 0;
  margin-top: var(--ina-spacing-xs);
}
.ina-confirmation__content {
  flex: 1;
}
.ina-confirmation__title {
  font-size: var(--ina-font-size-lg);
  font-weight: var(--ina-font-weight-semibold);
  color: var(--ina-color-text-primary);
  margin-bottom: var(--ina-spacing-xs);
}
.ina-confirmation__description {
  font-size: var(--ina-font-size-sm);
  color: var(--ina-color-text-secondary);
  line-height: 1.5;
}
.ina-confirmation__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ina-spacing-sm);
  padding: var(--ina-spacing-lg);
  background: var(--ina-color-surface);
  border-top: 1px solid var(--ina-color-border);
}
.ina-confirmation__button {
  padding: var(--ina-spacing-sm) var(--ina-spacing-md);
  border-radius: var(--ina-border-radius-md);
  font-size: var(--ina-font-size-sm);
  font-weight: var(--ina-font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.ina-confirmation__button--cancel {
  background: var(--ina-color-background);
  color: var(--ina-color-text-primary);
  border-color: var(--ina-color-border);
}
.ina-confirmation__button--cancel:hover {
  background: var(--ina-color-surface);
}
.ina-confirmation__button--confirm {
  background: var(--ina-color-primary);
  color: var(--ina-color-white);
}
.ina-confirmation__button--confirm:hover {
  background: var(--ina-color-primary-dark);
}
.ina-confirmation__button--variant-warning {
  background: var(--ina-color-warning);
  color: var(--ina-color-white);
}
.ina-confirmation__button--variant-warning:hover {
  background: var(--ina-color-warning-dark);
}
.ina-confirmation__button--variant-error {
  background: var(--ina-color-error);
  color: var(--ina-color-white);
}
.ina-confirmation__button--variant-error:hover {
  background: var(--ina-color-error-dark);
}
.ina-confirmation__button--variant-info {
  background: var(--ina-color-info);
  color: var(--ina-color-white);
}
.ina-confirmation__button--variant-info:hover {
  background: var(--ina-color-info-dark);
}
/* =========================== */
/* date picker STYLES          */
/* =========================== */
.ina-date-picker {
  position: relative;
  display: inline-block;
  background-color: var(--ina-white, #ffffff);
}
.ina-date-picker__trigger-wrapper {
  position: relative;
  width: 100%;
}
/* Trigger Button - Same layout as TextField wrapper */
.ina-date-picker__trigger {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2, 0.5rem);
  width: 100%;
  min-width: 200px; /* Ensure a decent minimum width */
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-8, 2rem)
    var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-lg, 0.5rem);
  background-color: var(--ina-background-primary, #ffffff);
  cursor: pointer;
  transition: all var(--ina-transition-base, 200ms ease-in-out);
}
.ina-date-picker__label {
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(--ina-content-primary, #1f1f1f);
  margin-bottom: var(--ina-spacing-2, 0.5rem);
  display: block;
}
.ina-date-picker__required {
  color: var(--ina-negative-500, #f02d2d);
  margin-left: var(--ina-spacing-1, 0.25rem);
}
/* Size variants */
.ina-date-picker__trigger--size-sm {
  /* Desktop >= 768px */
  height: 40px;
}
.ina-date-picker__trigger--size-md {
  /* Desktop >= 768px */
  height: 44px;
}
.ina-date-picker__trigger--size-lg {
  /* Desktop >= 768px */
  height: 48px;
}
/* Responsive adjustments */
@media (max-width: 767px) {
  .ina-date-picker__trigger--size-sm {
    height: 36px;
  }

  .ina-date-picker__trigger--size-md {
    height: 40px;
  }

  .ina-date-picker__trigger--size-lg {
    height: 44px;
  }
}
.ina-date-picker__trigger:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
.ina-date-picker__trigger:focus {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
.ina-date-picker__trigger--disabled {
  background-color: var(--ina-background-secondary, #f8f8f7);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-date-picker__trigger--disabled:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
  border-color: var(--ina-stroke-primary, #e5e5e5);
}
.ina-date-picker__trigger--readonly {
  background-color: var(--ina-background-secondary, #f8f8f7);
  cursor: default;
}
.ina-date-picker__trigger--readonly:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
  border-color: var(--ina-stroke-primary, #e5e5e5);
}
/* Trigger Icon - Same as prefix icon in TextField */
.ina-date-picker__trigger-icon {
  color: var(--ina-content-tertiary, #a3a3a3);
  flex-shrink: 0;
}
/* Trigger Text - Same as input field in TextField */
.ina-date-picker__trigger-text {
  flex: 1;
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-normal, 400);
  color: var(--ina-content-primary, #1f1f1f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.ina-date-picker__trigger-text--placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
  font-size: var(--ina-font-sm, 0.875rem);
}
/* Clear Button - Same styling as TextField */
.ina-date-picker__clear-button {
  position: absolute;
  right: var(--ina-spacing-3, 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-secondary, #525252);
  transition: color var(--ina-transition-base, 200ms ease-in-out);
  z-index: 2; /* Above trigger */
}
.ina-date-picker__clear-button:hover:not(:disabled) {
  color: var(--ina-content-secondary, #525252);
}
.ina-date-picker__clear-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ina-date-picker__clear-icon {
  width: 16px;
  height: 16px;
}
/* Calendar Panel */
.ina-date-picker__panel {
  position: absolute;
  z-index: 10004; /* Higher than YearPicker panel */
  top: 100%;
  left: 0;
  margin-top: var(--ina-spacing-1, 0.25rem);
  background-color: var(--ina-background-primary, #ffffff);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-xl, 0.75rem);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: var(--ina-spacing-4, 1rem);
  animation: date-picker-panel-fade-in 0.15s ease-out;
  /* Width and height follow content */
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 100%; /* Match trigger width at minimum */
  max-height: 440px; /* Maximum height as requested */
  /* Ensure panel content is solid */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Allow vertical scrolling if content exceeds max-height */
  overflow-x: visible;
}
@keyframes date-picker-panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Panel Positioning */
.ina-date-picker__panel--bottom {
  top: 100%;
  margin-top: var(--ina-spacing-1);
}
.ina-date-picker__panel--top {
  bottom: 100%;
  margin-bottom: var(--ina-spacing-1);
}
.ina-date-picker__panel--left {
  right: 100%;
  margin-right: var(--ina-spacing-1);
}
.ina-date-picker__panel--right {
  left: 100%;
  margin-left: var(--ina-spacing-1);
}
/* Dynamic right positioning to prevent overflow */
.ina-date-picker__panel--right-aligned {
  left: auto !important;
  left: auto !important;
  right: 0;
}
/* Panel only mode (static positioning) */
.ina-date-picker--panel-only .ina-date-picker__panel {
  position: static;
  margin: 0;
  transform: none;
  animation: none;
  z-index: 1;
  box-shadow: none; /* Remove shadow for embedded view, usually handled by container */
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
}
.ina-date-picker--panel-only {
  width: -moz-fit-content;
  width: fit-content;
}
/* Panel Content */
.ina-date-picker__panel-content {
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-4);
  height: -moz-fit-content;
  height: fit-content;
  /* Allow content to overflow if needed */
  overflow: visible;
  min-height: 0; /* Allow flex shrinking */
  /* Prevent stretching beyond viewport */
  max-width: 100%;
}
.ina-date-picker__panel-content--responsive {
  flex-direction: column;
}
/* Single column layout for single mode */
.ina-date-picker__panel-content--single {
  flex-direction: column;
}
/* Dual column layout for range/multiple mode */
.ina-date-picker__panel-content--dual {
  flex-direction: column;
}
.ina-date-picker__day.ina-date-picker__day--other-month.ina-date-picker__day--range-in.ina-date-picker__day--in-range {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
@media (min-width: 1280px) {
  .ina-date-picker__panel-content--responsive {
    flex-direction: row;
  }

  .ina-date-picker__panel-content--dual {
    flex-direction: row;
    /* Ensure dual panel doesn't exceed viewport width */
    max-width: 100%;
    /* Prevent stretching */
    align-items: flex-start;
    /* Prevent content from stretching vertically */
    align-content: flex-start;
  }

  /* Limit calendar container width in dual mode */
  .ina-date-picker__panel-content--dual .ina-date-picker__calendar-container {
    width: auto; /* Let content determine width */
    min-width: 280px; /* Minimum readable width */
    max-width: calc(
      50% - var(--ina-spacing-2)
    ); /* Each calendar takes max 50% minus gap */
  }

  /* Limit calendar width in dual mode */
  .ina-date-picker__panel-content--dual .ina-date-picker__calendar {
    width: auto; /* Let content determine width */
    min-width: 280px; /* Minimum readable width */
    max-width: 100%; /* Don't exceed container */
    /* Prevent calendar from stretching vertically */
    height: -moz-fit-content;
    height: fit-content;
  }
}
@media (max-width: 1279px) {
  /* Hide second panel on mobile and tablet (below 1280px) */
  .ina-date-picker__calendar:last-child {
    display: none;
  }

  /* Ensure the mobile-only chevrons are visible on mobile/tablet */
  .ina-date-picker__nav-button--mobile-only {
    display: inline-flex !important; /* Force visible on mobile */
  }

  /* Ensure dual panel layout stays vertical on mobile and tablet */
  .ina-date-picker__panel-content--dual {
    flex-direction: column;
  }
}
.ina-date-picker__calendar-container {
  flex: 1;
  min-width: 0; /* Allow flex shrinking */
}
.ina-date-picker__calendar {
  flex: 1;
  min-width: 0; /* Allow flex shrinking */
}
/* Calendar Navigation */
.ina-date-picker__calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ina-spacing-3);
  position: relative;
  min-height: 40px; /* Ensure consistent height */
}
.ina-date-picker__calendar-title {
  font-size: var(--ina-font-lg, 1.125rem);
  font-weight: var(--ina-font-semibold, 600);
  color: var(--ina-content-primary, #1f1f1f);
}
.ina-date-picker__nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ina-spacing-1, 0.25rem);
  border: none;
  background-color: transparent;
  color: var(--ina-text-secondary, #525252);
  cursor: pointer;
  border-radius: var(--ina-radius-base, 0.25rem);
  transition: all var(--ina-transition-fast);
}
.ina-date-picker__nav-button:hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  color: var(--ina-content-primary, #1f1f1f);
}
.ina-date-picker__nav-button:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  z-index: 2;
}
.ina-date-picker__nav-icon {
  color: inherit;
}
/* Ensure next chevron visible in single mode */
.ina-date-picker__panel-content--single
  .ina-date-picker__calendar-header
  .ina-date-picker__nav-button:last-child {
  display: inline-flex;
}
/* Calendar Grid */
.ina-date-picker__calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0 !important;
}
.ina-date-picker__day-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ina-spacing-2, 0.5rem);
  font-size: var(--ina-font-xs, 0.75rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(--ina-content-tertiary, #a3a3a3);
  text-align: center;
  width: 100%;
  height: 40px;
}
.ina-date-picker__day-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ina-date-picker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--ina-font-xs, 0.75rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(--ina-content-primary, #1f1f1f);
  background-color: var(--ina-background-primary, #ffffff);
  cursor: pointer;
  border: none;
  border-radius: var(--ina-radius-lg, 0.5rem);
  transition: all var(--ina-transition-fast, 150ms ease-in-out);
  height: 40px;
  width: 100%;
}
.ina-date-picker__day:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  z-index: 2;
}
.ina-date-picker__day:hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
}
.ina-date-picker__day--selected {
  background-color: var(--ina-primary-primary, #1f1f1f);
  color: var(--ina-base-white, #ffffff);
  border-radius: var(--ina-radius-lg, 0.5rem);
}
.ina-date-picker__day--other-month.ina-date-picker__day--selected {
  color: var(--ina-base-white, #ffffff);
}
.ina-date-picker__day--selected:hover {
  background-color: var(--ina-primary-primary, #1f1f1f);
}
.ina-date-picker__day.ina-date-picker__day--range-start {
  background-color: var(--ina-primary-primary, #1f1f1f) !important;
  color: var(--ina-base-white, #ffffff) !important;
  border-radius: var(--ina-radius-lg, 0.5rem);
}
.ina-date-picker__day.ina-date-picker__day--range-end {
  background-color: var(--ina-primary-primary, #1f1f1f) !important;
  color: var(--ina-base-white, #ffffff) !important;
  border-radius: var(--ina-radius-lg, 0.5rem);
}
.ina-date-picker__day--range-in {
  background-color: var(--ina-background-tertiary, #f5f5f5) !important;
  color: var(--ina-text-primary, #1f1f1f) !important;
  border-radius: 0;
}
.ina-date-picker__day--start {
  background-color: var(--ina-primary-primary, #1f1f1f);
  border-radius: var(--ina-radius-lg, 0.5rem);
}
.ina-date-picker__day--end {
  border-radius: var(--ina-radius-lg, 0.5rem);
}
.ina-date-picker__day.ina-date-picker__day--end:hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
}
.ina-date-picker__day--in-range {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  border-radius: 0;
}
.ina-date-picker__day.ina-date-picker__day--disabled {
  color: var(--ina-content-tertiary, #a3a3a3);
  cursor: not-allowed;
  border-radius: 0;
}
.ina-date-picker__day.ina-date-picker__day--disabled:hover {
  opacity: 0.4;
}
.ina-date-picker__day.ina-date-picker__day--disabled.ina-date-picker__day--selected {
  border-radius: var(--ina-radius-lg, 0.5rem);
}
.ina-date-picker__day.ina-date-picker__day--today {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ina-date-picker__day.ina-date-picker__day--today .ina-date-picker__day-number {
  border-top: 2px solid var(--ina-content-primary, #1f1f1f);
  font-weight: var(--ina-font-bold, 700);
}
.ina-date-picker__day.ina-date-picker__day--today.ina-date-picker__day--selected
  .ina-date-picker__day-number {
  border-top: 2px solid var(--ina-white, #ffffff);
}
/* .ina-date-picker__day--today::before {
  content: 'Hari Ini';
  display: block;
  font-size: 10px;
  margin-bottom: 4px;
  color: var(--ina-content-primary);
} */
/* .ina-date-picker__day--today.ina-date-picker__day--selected::before {
  color: var(--ina-white);
} */
.ina-date-picker__day--other-month {
  color: var(--ina-content-tertiary, #a3a3a3);
}
/* Month/Year Selector */
.ina-date-picker__month-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ina-spacing-3, 0.75rem);
}
.ina-date-picker__month-text {
  font-size: var(--ina-font-base, 1rem);
  font-weight: var(--ina-font-semibold, 600);
  color: var(--ina-content-primary, #1f1f1f);
  cursor: pointer;
  padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
  border-radius: var(--ina-radius-base, 0.25rem);
  transition: all var(--ina-transition-fast, 150ms ease-in-out);
}
.ina-date-picker__month-text:hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
}
/* Range Display */
.ina-date-picker__range-display {
  border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
  padding-top: var(--ina-spacing-3, 0.75rem);
  margin-top: var(--ina-spacing-3, 0.75rem);
}
.ina-date-picker__range-text {
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-text-secondary, #525252);
  text-align: center;
}
/* Disabled State */
.ina-date-picker--disabled .ina-date-picker__trigger {
  background-color: var(--ina-background-secondary, #f8f8f7);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-date-picker--disabled .ina-date-picker__trigger:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
  border-color: var(--ina-stroke-primary, #e5e5e5);
}
/* Focus Visible */
.ina-date-picker__trigger:focus-visible {
  outline: 2px solid var(--ina-content-primary, #1f1f1f);
  outline-offset: 2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
  .ina-date-picker__trigger,
  .ina-date-picker__panel {
    border-width: 2px;
  }

  .ina-date-picker__trigger:focus {
    outline-width: 3px;
  }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .ina-date-picker__trigger,
  .ina-date-picker__day,
  .ina-date-picker__nav-button {
    transition: none;
  }

  .ina-date-picker__panel {
    animation: none;
  }
}
/* Responsive Design */
@media (max-width: 639px) {
  /* .ina-date-picker__day--today::before {
    font-size: 6px;
  } */
  .ina-date-picker__trigger--size-sm {
    height: 32px;
  }

  .ina-date-picker__trigger--size-md {
    height: 36px;
  }

  .ina-date-picker__trigger--size-lg {
    height: 40px;
  }
  /* Trigger adjustments */
  .ina-date-picker__trigger {
    padding: 0.375rem var(--ina-spacing-2); /* 6px 8px */
    gap: 0.375rem; /* 6px */
  }

  .ina-date-picker__trigger-icon {
    width: 18px;
    height: 18px;
  }

  .ina-date-picker__trigger-text {
    font-size: var(--ina-font-xs);
  }

  .ina-date-picker__trigger-text--placeholder {
    font-size: var(--ina-font-xs);
  }

  .ina-date-picker__clear-icon {
    width: 14px;
    height: 14px;
  }

  /* Panel adjustments */
  .ina-date-picker__panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: var(--ina-spacing-1) !important;
    max-width: 100% !important;
    padding: var(--ina-spacing-3) !important;
    max-height: 420px !important; /* Consistent max-height */
    min-width: 280px !important;
  }

  .ina-date-picker__label {
    font-size: var(--ina-font-xs, 0.75rem);
  }

  .ina-date-picker__panel-content {
    gap: var(--ina-spacing-3);
  }

  .ina-date-picker__panel-content--responsive {
    flex-direction: column;
  }

  /* Calendar header adjustments */
  .ina-date-picker__calendar-header {
    margin-bottom: var(--ina-spacing-2);
    min-height: 36px;
    padding: 0 var(--ina-spacing-1);
  }

  .ina-date-picker__nav-button {
    padding: var(--ina-spacing-1);
    min-width: 32px;
    min-height: 32px;
  }

  .ina-date-picker__nav-icon {
    width: 18px;
    height: 18px;
  }

  .ina-date-picker__header-controls {
    gap: 0.375rem; /* 6px */
  }

  .ina-date-picker__day-header {
    padding: var(--ina-spacing-1);
    font-size: 0.625rem; /* 10px */
    font-weight: var(--ina-font-medium);
    height: 32px;
  }

  .ina-date-picker__day {
    padding: var(--ina-spacing-1);
    font-size: var(--ina-font-2xs);
    height: 32px !important;
  }

  /* Calendar title adjustments */
  .ina-date-picker__calendar-title {
    font-size: var(--ina-font-base);
  }

  /* Apply button adjustments */
  .ina-date-picker__apply-container {
    margin-top: var(--ina-spacing-2);
    padding-top: var(--ina-spacing-2);
  }

  .ina-date-picker__apply-button {
    padding: var(--ina-spacing-2);
    font-size: var(--ina-font-2xs);
    height: 36px;
  }

  /* Hide second calendar panel on mobile for range/multiple modes */
  .ina-date-picker__calendar:last-child {
    display: none;
  }

  /* Next month header adjustments */
  .ina-date-picker__next-month-header {
    margin-bottom: var(--ina-spacing-2);
    min-height: 36px;
  }

  .ina-date-picker__next-month-controls {
    gap: 0.375rem; /* 6px */
  }

  /* MonthPicker and YearPicker adjustments in DatePicker context */
  .ina-date-picker__dropdown-container .ina-month-picker__trigger,
  .ina-date-picker__dropdown-container .ina-year-picker__trigger {
    height: 28px;
    padding: var(--ina-spacing-1) 0.375rem !important; /* 4px 6px */
    font-size: var(--ina-font-xs) !important;
    min-width: 45px !important;
  }

  .ina-date-picker__dropdown-container .ina-month-picker__trigger-text,
  .ina-date-picker__dropdown-container .ina-year-picker__trigger-text {
    font-size: var(--ina-font-xs) !important;
    font-weight: var(--ina-font-medium);
  }
}
/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1279px) {
  .ina-date-picker__panel {
    max-width: -moz-max-content;
    max-width: max-content;
    padding: 0.875rem; /* 14px */
  }

  .ina-date-picker__day-header {
    font-size: var(--ina-font-xs);
    padding: 0.375rem; /* 6px */
  }

  .ina-date-picker__calendar-header {
    margin-bottom: var(--ina-spacing-3);
  }

  /* Ensure second panel is hidden on tablet */
  .ina-date-picker__calendar:last-child {
    display: none;
  }
}
/* Desktop XL: Show both calendar panels for range/multiple modes (>= 1280px) */
@media (min-width: 1280px) {
  .ina-date-picker__calendar:last-child {
    display: block;
  }

  /* Ensure all chevrons are visible in dual panel mode */
  .ina-date-picker__panel-content--dual
    .ina-date-picker__calendar-container
    .ina-date-picker__calendar-header
    .ina-date-picker__nav-button:last-child {
    display: inline-flex;
  }

  /* Ensure panel width is appropriate for dual mode */
  /* When panel contains dual content, limit its width */
  .ina-date-picker__panel {
    max-width: calc(100vw - 2rem); /* Prevent exceeding viewport */
  }
}
/* Dark Mode Support */
[data-theme='dark'] .ina-date-picker__day:hover {
  background-color: var(--ina-background-secondary, #525252);
}
[data-theme='dark'] .ina-date-picker__nav-button:hover {
  background-color: var(--ina-background-secondary, #525252);
}
/* [data-theme='dark'] .ina-date-picker__trigger {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-stroke-primary);
}

[data-theme='dark'] .ina-date-picker__trigger:hover {
  background-color: var(--ina-background-secondary);
}

[data-theme='dark'] .ina-date-picker__trigger:focus {
  box-shadow: inset 0 0 0 2px var(--ina-primary-50);
}

[data-theme='dark'] .ina-date-picker__panel {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-stroke-primary);
}

[data-theme='dark'] .ina-date-picker__day {
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
}

[data-theme='dark'] .ina-date-picker__day:hover {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}

[data-theme='dark'] .ina-date-picker__day--selected {
  background-color: var(--ina-content-primary);
  color: var(--ina-white);
}

[data-theme='dark'] .ina-date-picker__day--range-start,
[data-theme='dark'] .ina-date-picker__day--range-end {
  background-color: var(--ina-content-primary) !important;
  color: var(--ina-white) !important;
}

[data-theme='dark'] .ina-date-picker__day--range-in {
  background-color: var(--ina-primary-200) !important;
  color: var(--ina-primary-800) !important;
}

[data-theme='dark'] .ina-date-picker__day--in-range {
  background-color: var(--ina-primary-200);
}

[data-theme='dark'] .ina-date-picker__day--disabled {
  color: var(--ina-content-tertiary);
  opacity: 0.4;
  background-color: var(--ina-background-secondary);
}

[data-theme='dark'] .ina-date-picker__day--disabled:hover {
  background-color: var(--ina-background-secondary);
  opacity: 0.4;
}

[data-theme='dark'] .ina-date-picker__apply-container {
  border-top-color: var(--ina-stroke-primary);
}

[data-theme='dark'] .ina-date-picker__apply-button {
  background-color: var(--ina-content-primary);
  color: var(--ina-white);
}

[data-theme='dark'] .ina-date-picker__apply-button:hover:not(:disabled) {
  background-color: var(--ina-text-secondary);
}

[data-theme='dark'] .ina-date-picker__apply-button:disabled {
  background-color: var(--ina-stroke-primary);
  color: var(--ina-content-tertiary);
}

[data-theme='dark'] .ina-date-picker__cancel-button {
  background-color: var(--ina-background-secondary);
  color: var(--ina-text-secondary);
  border-color: var(--ina-stroke-primary);
}

[data-theme='dark'] .ina-date-picker__cancel-button:hover {
  background-color: var(--ina-background-tertiary, #f2f2f2);
  color: var(--ina-content-primary);
  border-color: var(--ina-stroke-secondary);
}

/* =========================== */
/* DROPDOWN COMPONENTS         */
/* =========================== */
/* Dropdown trigger buttons */
.ina-date-picker__dropdown-trigger {
  padding: var(--ina-spacing-1) var(--ina-spacing-3);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-base);
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
}
.ina-date-picker__dropdown-trigger:hover {
  background-color: var(--ina-background-secondary);
}
/* Dropdown options */
.ina-date-picker__dropdown-option {
  width: 100%;
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
  text-align: left;
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  font-size: var(--ina-font-sm);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
}
.ina-date-picker__dropdown-option:hover {
  background-color: var(--ina-background-secondary);
}
/* Decade navigation */
.ina-date-picker__decade-nav-button {
  padding: var(--ina-spacing-2);
  background-color: transparent;
  color: var(--ina-content-primary);
  border-radius: var(--ina-radius-base);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
}
.ina-date-picker__decade-nav-button:hover {
  background-color: var(--ina-background-secondary);
}
.ina-date-picker__decade-label {
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary);
}
/* Year options */
.ina-date-picker__year-option {
  padding: var(--ina-spacing-2);
  font-size: var(--ina-font-sm);
  border-radius: var(--ina-radius-base);
  background-color: transparent;
  color: var(--ina-content-primary);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
}
.ina-date-picker__year-option:hover {
  background-color: var(--ina-background-secondary);
}
.ina-date-picker__year-option--selected {
  background-color: var(--ina-content-primary);
  color: var(--ina-white);
}
.ina-date-picker__year-option--selected:hover {
  background-color: var(--ina-content-primary);
}
/* =========================== */
/* LAYOUT COMPONENTS           */
/* =========================== */
/* Header controls */
.ina-date-picker__header-controls {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
}
/* Dropdown container */
.ina-date-picker__dropdown-container {
  position: relative;
}
/* Decade panels */
.ina-date-picker__decade-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--ina-spacing-1);
  background-color: var(--ina-background-primary);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-lg);
  box-shadow: var(--ina-shadow-lg);
  z-index: 50;
  width: 320px;
  padding: var(--ina-spacing-4);
}
/* Decade headers */
.ina-date-picker__decade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ina-spacing-4);
}
/* Decade grid */
.ina-date-picker__decade-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ina-spacing-1);
}
/* Next month header */
.ina-date-picker__next-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ina-spacing-3);
  position: relative;
  min-height: 40px; /* Ensure consistent height with left panel */
}
/* Next month controls */
.ina-date-picker__next-month-controls {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
}
/* Today button */
.ina-date-picker__today-button {
  padding: var(--ina-spacing-2);
  background-color: transparent;
  color: var(--ina-content-primary);
  border-radius: var(--ina-radius-base);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
}
.ina-date-picker__today-button:hover {
  background-color: var(--ina-background-secondary);
}
/* Apply/Cancel Buttons */
.ina-date-picker__apply-container {
  margin-top: var(--ina-spacing-4);
  padding-top: var(--ina-spacing-3);
  padding-bottom: var(
    --ina-spacing-1
  ); /* Add bottom padding to prevent button overflow */
  border-top: 1px solid var(--ina-stroke-primary);
}
.ina-date-picker__button-group {
  display: flex;
  gap: var(--ina-spacing-2);
}
.ina-date-picker__apply-button {
  flex: 1;
  padding: var(--ina-spacing-3) var(--ina-spacing-4);
  background-color: var(--ina-content-primary);
  color: var(--ina-white);
  border: none;
  border-radius: var(--ina-radius-lg);
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
}
.ina-date-picker__apply-button:hover:not(:disabled) {
  background-color: var(--ina-text-secondary);
}
.ina-date-picker__apply-button:disabled {
  background-color: var(--ina-stroke-primary);
  color: var(--ina-content-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-date-picker__cancel-button {
  flex: 1;
  padding: var(--ina-spacing-3) var(--ina-spacing-4);
  background-color: var(--ina-background-secondary);
  color: var(--ina-text-secondary);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-lg);
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
}
.ina-date-picker__cancel-button:hover {
  background-color: var(--ina-background-tertiary, #f2f2f2);
  color: var(--ina-content-primary);
  border-color: var(--ina-stroke-secondary);
}
.ina-date-picker__day.ina-date-picker__day--selected.ina-date-picker__day--disabled {
  background-color: var(--ina-content-primary);
  color: var(--ina-white);
}
/**
 * Divider Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-divider {
  /* Base divider styling */
  margin: 0;
  padding: 0;
  border: 0;
  border-width: 1px;
  border-style: solid;
  flex-shrink: 0;
}
/* Orientation variants */
.ina-divider--horizontal {
  border-top: 1px solid;
  width: 100%;
}
.ina-divider--vertical {
  border-left: 1px solid;
  height: 1rem; /* Default height for vertical */
}
/* Color variants */
.ina-divider--light {
  border-color: var(--ina-stroke-secondary);
}
.ina-divider--dark {
  border-color: var(--ina-stroke-primary);
}
/* Default color (when light prop is not specified) */
.ina-divider--horizontal.ina-divider--dark,
.ina-divider--vertical.ina-divider--dark {
  border-color: var(--ina-stroke-primary);
}
.ina-divider--horizontal.ina-divider--light,
.ina-divider--vertical.ina-divider--light {
  border-color: var(--ina-stroke-secondary);
}
/* Margin variants for horizontal dividers */
.ina-divider--horizontal.ina-divider--full-width {
  /* Default: full width, no margins */
}
.ina-divider--horizontal.ina-divider--inset {
  margin-left: var(--ina-spacing-4);
}
.ina-divider--horizontal.ina-divider--middle {
  margin-left: auto;
  margin-right: auto;
}
/* Margin variants for vertical dividers */
.ina-divider--vertical.ina-divider--full-width {
  /* Default vertical styling */
}
.ina-divider--vertical.ina-divider--inset {
  margin-top: var(--ina-spacing-4);
}
.ina-divider--vertical.ina-divider--middle {
  margin-top: auto;
  margin-bottom: auto;
}
/* Flex item support for vertical dividers */
.ina-divider--vertical.ina-divider--flex-item {
  align-self: stretch;
  height: auto;
}
/* Height variants for vertical dividers */
.ina-divider--vertical.ina-divider--small {
  height: calc(0.75 * var(--ina-spacing-4)); /* 12px */
}
.ina-divider--vertical.ina-divider--medium {
  height: var(--ina-spacing-4); /* 16px */
}
.ina-divider--vertical.ina-divider--large {
  height: var(--ina-spacing-8); /* 32px */
}
.ina-divider--vertical.ina-divider--full {
  height: 100%;
}
/* Content variants - dividers with text/content */
.ina-divider--with-content {
  display: flex;
  align-items: center;
  border: none;
}
.ina-divider--with-content::before,
.ina-divider--with-content::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--ina-stroke-primary);
}
.ina-divider--with-content.ina-divider--light::before,
.ina-divider--with-content.ina-divider--light::after {
  border-color: var(--ina-stroke-secondary);
}
.ina-divider__content {
  padding: 0 var(--ina-spacing-4);
  color: var(--ina-content-secondary);
  font-size: var(--ina-font-sm);
}
/* Spacing variants */
.ina-divider--spacing-xs {
  margin-top: var(--ina-spacing-1);
  margin-bottom: var(--ina-spacing-1);
}
.ina-divider--spacing-sm {
  margin-top: var(--ina-spacing-2);
  margin-bottom: var(--ina-spacing-2);
}
.ina-divider--spacing-md {
  margin-top: var(--ina-spacing-4);
  margin-bottom: var(--ina-spacing-4);
}
.ina-divider--spacing-lg {
  margin-top: var(--ina-spacing-6);
  margin-bottom: var(--ina-spacing-6);
}
.ina-divider--spacing-xl {
  margin-top: var(--ina-spacing-8);
  margin-bottom: var(--ina-spacing-8);
}
/* Responsive dividers */
@media (max-width: 640px) {
  .ina-divider__content {
    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
  }
}
@media (min-width: 640px) {
  .ina-divider--responsive-sm\:larger {
    height: var(--ina-spacing-8);
  }
}
@media (min-width: 768px) {
  .ina-divider--responsive-md\:middle {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) {
  .ina-divider--responsive-lg\:middle {
    margin-left: auto;
    margin-right: auto;
  }
}
/**
 * Drawer Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-drawer {
  /* Base overlay container */
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  animation: overlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Position variants */
.ina-drawer--position-top {
  align-items: flex-start;
  justify-content: center;
}
.ina-drawer--position-bottom {
  align-items: flex-end;
  justify-content: center;
}
.ina-drawer--position-left {
  align-items: center;
  justify-content: flex-start;
}
.ina-drawer--position-right {
  align-items: center;
  justify-content: flex-end;
}
/* Mobile override position adjustments - left/right become bottom-like */
@media (max-width: 640px) {
  .ina-drawer--position-right,
  .ina-drawer--position-left {
    align-items: flex-end;
    justify-content: center;
  }
}
/* Backdrop with smooth fade animation */
.ina-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(31, 31, 31, 0.48);
  backdrop-filter: blur(2px);
  animation: backdropFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes backdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(2px);
  }
}
@keyframes backdropFadeOut {
  0% {
    opacity: 1;
    backdrop-filter: blur(2px);
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}
/* Backdrop closing animation */
.ina-drawer--closing .ina-drawer__backdrop {
  animation: backdropFadeOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Main panel */
.ina-drawer__panel {
  position: relative;
  background-color: var(--ina-background-primary);
  border-radius: var(--ina-radius-lg);
  box-shadow: var(--ina-shadow-xl);
  display: flex;
  flex-direction: column;
  z-index: 10;
  transform-origin: center;
  transition: transform var(--ina-transition-duration-300) ease-in-out;
}
/* Position-specific animations with smooth easing */
.ina-drawer--position-right .ina-drawer__panel {
  animation: panelSlideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ina-drawer--position-left .ina-drawer__panel {
  animation: panelSlideInLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ina-drawer--position-top .ina-drawer__panel {
  animation: panelSlideInTop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ina-drawer--position-bottom .ina-drawer__panel {
  animation: panelSlideInBottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Position-specific slide-in animations with smooth easing */
@keyframes panelSlideInRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes panelSlideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes panelSlideInTop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes panelSlideInBottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Position-specific panel styling */
.ina-drawer--position-top .ina-drawer__panel {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ina-drawer--position-bottom .ina-drawer__panel {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.ina-drawer--position-left .ina-drawer__panel {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ina-drawer--position-right .ina-drawer__panel {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Panel sizes */
/* Removed old size classes - now using width variants */
/* Mobile size adjustments */
@media (max-width: 640px) {
  .ina-drawer__panel {
    border-radius: var(--ina-radius-lg) var(--ina-radius-lg) 0 0;
  }

  .ina-drawer__title {
    font-size: var(--ina-font-base); /* Turun dari lg ke base */
  }

  /* Position bottom: min 280-320px (40-45%), max 90vh */
  .ina-drawer--position-bottom .ina-drawer__panel {
    width: 100vw;
    min-height: 280px;
    height: 45vh;
    max-height: 90vh;
    margin: 0;
  }

  /* Position top: same as bottom for mobile */
  .ina-drawer--position-top .ina-drawer__panel {
    width: 100vw;
    min-height: 280px;
    height: 45vh;
    max-height: 90vh;
    margin: 0;
    border-radius: 0 0 var(--ina-radius-lg) var(--ina-radius-lg);
  }

  /* Position left/right: behave like bottom on mobile */
  .ina-drawer--position-left .ina-drawer__panel,
  .ina-drawer--position-right .ina-drawer__panel {
    width: 100vw;
    min-height: 280px;
    height: 45vh;
    max-height: 90vh;
    margin: 0;
    border-radius: var(--ina-radius-lg) var(--ina-radius-lg) 0 0;
  }

  /* Override animations for left/right to use bottom animation on mobile */
  .ina-drawer--position-left .ina-drawer__panel,
  .ina-drawer--position-right .ina-drawer__panel {
    animation: panelSlideInBottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
/* Desktop size adjustments */
@media (min-width: 641px) {
  /* Position top/bottom: min 40vh, max 80vh */
  .ina-drawer--position-top .ina-drawer__panel,
  .ina-drawer--position-bottom .ina-drawer__panel {
    width: 100vw;
    min-height: 40vh;
    height: 60vh;
    max-height: 80vh;
  }

  /* Position left/right: min 420px, max 520px (default) */
  .ina-drawer--position-left .ina-drawer__panel,
  .ina-drawer--position-right .ina-drawer__panel {
    /* Default width for panels without specific width variant */
    min-width: 420px;
    max-width: 520px;
    /* Full height for side panels */
    height: 100vh;
    max-height: 100vh;
  }

  /* Width variants for desktop - Side panels (left/right) */
  .ina-drawer--position-left .ina-drawer__panel--width-sm,
  .ina-drawer--position-right .ina-drawer__panel--width-sm {
    width: 420px !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .ina-drawer--position-left .ina-drawer__panel--width-md,
  .ina-drawer--position-right .ina-drawer__panel--width-md {
    width: 520px !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  /* .ina-drawer--position-left .ina-drawer__panel--width-lg,
  .ina-drawer--position-right .ina-drawer__panel--width-lg {
    width: 500px !important;
    min-width: 500px !important;
    max-width: 600px !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .ina-drawer--position-left .ina-drawer__panel--width-xl,
  .ina-drawer--position-right .ina-drawer__panel--width-xl {
    width: 600px !important;
    min-width: 600px !important;
    max-width: 700px !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .ina-drawer--position-left .ina-drawer__panel--width-2xl,
  .ina-drawer--position-right .ina-drawer__panel--width-2xl {
    width: 700px !important;
    min-width: 700px !important;
    max-width: 800px !important;
    height: 100vh !important;
    max-height: 100vh !important;
  } */

  /* .ina-drawer--position-left .ina-drawer__panel--width-full,
  .ina-drawer--position-right .ina-drawer__panel--width-full {
    width: 80vw !important;
    min-width: 80vw !important;
    max-width: 80vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
  } */

  /* Width variants for desktop - Top/Bottom panels (always 100vw) */
  .ina-drawer--position-top .ina-drawer__panel--width-sm,
  .ina-drawer--position-top .ina-drawer__panel--width-md,
  .ina-drawer--position-top .ina-drawer__panel--width-lg,
  .ina-drawer--position-top .ina-drawer__panel--width-xl,
  .ina-drawer--position-top .ina-drawer__panel--width-2xl,
  .ina-drawer--position-top .ina-drawer__panel--width-full,
  .ina-drawer--position-bottom .ina-drawer__panel--width-sm,
  .ina-drawer--position-bottom .ina-drawer__panel--width-md,
  .ina-drawer--position-bottom .ina-drawer__panel--width-lg,
  .ina-drawer--position-bottom .ina-drawer__panel--width-xl,
  .ina-drawer--position-bottom .ina-drawer__panel--width-2xl,
  .ina-drawer--position-bottom .ina-drawer__panel--width-full {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 60vh !important;
    max-height: 60vh !important;
  }

  /* Custom width support - for values like '40vw', '500px', etc. - Side panels */
  /* .ina-drawer--position-left .ina-drawer__panel--width-40vw,
  .ina-drawer--position-right .ina-drawer__panel--width-40vw {
    width: 40vw !important;
    min-width: 40vw;
    max-width: 40vw;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .ina-drawer--position-left .ina-drawer__panel--width-50vw,
  .ina-drawer--position-right .ina-drawer__panel--width-50vw {
    width: 50vw !important;
    min-width: 50vw;
    max-width: 50vw;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .ina-drawer--position-left .ina-drawer__panel--width-60vw,
  .ina-drawer--position-right .ina-drawer__panel--width-60vw {
    width: 60vw !important;
    min-width: 60vw;
    max-width: 60vw;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .ina-drawer--position-left .ina-drawer__panel--width-70vw,
  .ina-drawer--position-right .ina-drawer__panel--width-70vw {
    width: 70vw !important;
    min-width: 70vw;
    max-width: 70vw;
    height: 100vh !important;
    max-height: 100vh !important;
  } */

  /* .ina-drawer--position-left .ina-drawer__panel--width-80vw,
  .ina-drawer--position-right .ina-drawer__panel--width-80vw {
    width: 80vw !important;
    min-width: 80vw;
    max-width: 80vw;
    height: 100vh !important;
    max-height: 100vh !important;
  } */

  /* Custom width support - Top/Bottom panels (always 100vw) */
  /* .ina-drawer--position-top .ina-drawer__panel--width-40vw,
  .ina-drawer--position-top .ina-drawer__panel--width-50vw,
  .ina-drawer--position-top .ina-drawer__panel--width-60vw,
  .ina-drawer--position-top .ina-drawer__panel--width-70vw,
  .ina-drawer--position-top .ina-drawer__panel--width-80vw,
  .ina-drawer--position-bottom .ina-drawer__panel--width-40vw,
  .ina-drawer--position-bottom .ina-drawer__panel--width-50vw,
  .ina-drawer--position-bottom .ina-drawer__panel--width-60vw,
  .ina-drawer--position-bottom .ina-drawer__panel--width-70vw,
  .ina-drawer--position-bottom .ina-drawer__panel--width-80vw {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 60vh !important;
    max-height: 60vh !important;
  } */
}
/* Header */
.ina-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ina-spacing-4);
  border-bottom: 1px solid var(--ina-stroke-primary);
  flex-shrink: 0;
}
.ina-drawer--position-top .ina-drawer__header {
  order: 1;
}
/* Header title */
.ina-drawer__title {
  font-size: var(--ina-font-lg);
  font-weight: var(--ina-font-semibold);
  color: var(--ina-content-primary);
  margin: 0;
}
/* Close button */
.ina-drawer__close-button {
  padding: var(--ina-spacing-1);
  border: none;
  background: none;
  border-radius: var(--ina-radius-base);
  cursor: pointer;
  color: var(--ina-content-secondary);
  transition: all var(--ina-transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.ina-drawer__close-button:hover {
  background-color: var(--ina-neutral-100);
  color: var(--ina-content-primary);
}
.ina-drawer__close-button:focus-visible {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
  background-color: var(--ina-neutral-100);
}
.ina-drawer__close-icon {
  width: 20px;
  height: 20px;
}
/* Content area */
.ina-drawer__content {
  padding: var(--ina-spacing-4);
  overflow: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--ina-neutral-400) var(--ina-neutral-100);
}
.ina-drawer__content::-webkit-scrollbar {
  width: 6px;
}
.ina-drawer__content::-webkit-scrollbar-track {
  background: var(--ina-neutral-100);
}
.ina-drawer__content::-webkit-scrollbar-thumb {
  background-color: var(--ina-neutral-400);
  border-radius: var(--ina-radius-full);
}
.ina-drawer__content::-webkit-scrollbar-thumb:hover {
  background-color: var(--ina-neutral-500);
}
/* Footer */
.ina-drawer__footer {
  padding: var(--ina-spacing-4);
  border-top: 1px solid var(--ina-stroke-primary);
  flex-shrink: 0;
}
.ina-drawer--position-top .ina-drawer__footer {
  order: 2;
}
/* Footer positioning */
.ina-drawer__footer--position-left {
  display: flex;
  justify-content: flex-start;
  gap: var(--ina-spacing-2);
}
.ina-drawer__footer--position-right {
  display: flex;
  justify-content: flex-end;
  gap: var(--ina-spacing-2);
}
.ina-drawer__footer--position-center {
  display: flex;
  justify-content: center;
  gap: var(--ina-spacing-2);
}
.ina-drawer__footer--position-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Animation states */
.ina-drawer--closing {
  animation: overlayFadeOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes overlayFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Position-specific closing animations with smooth easing */
.ina-drawer--closing.ina-drawer--position-right .ina-drawer__panel {
  animation: panelSlideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ina-drawer--closing.ina-drawer--position-left .ina-drawer__panel {
  animation: panelSlideOutLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ina-drawer--closing.ina-drawer--position-top .ina-drawer__panel {
  animation: panelSlideOutTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ina-drawer--closing.ina-drawer--position-bottom .ina-drawer__panel {
  animation: panelSlideOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Mobile: left/right use bottom closing animation */
@media (max-width: 640px) {
  .ina-drawer--closing.ina-drawer--position-left .ina-drawer__panel,
  .ina-drawer--closing.ina-drawer--position-right .ina-drawer__panel {
    animation: panelSlideOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}
@keyframes panelSlideOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
/* Position-specific slide-out animations with smooth easing */
@keyframes panelSlideOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes panelSlideOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes panelSlideOutTop {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes panelSlideOutBottom {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
/* Position-specific animations - Fixed positioning */
.ina-drawer--position-right .ina-drawer__panel {
  /* Panel should be visible by default, not hidden */
  transform: translateX(0);
}
.ina-drawer--position-left .ina-drawer__panel {
  /* Panel should be visible by default, not hidden */
  transform: translateX(0);
}
.ina-drawer--position-top .ina-drawer__panel {
  /* Panel should be visible by default, not hidden */
  transform: translateY(0);
}
.ina-drawer--position-bottom .ina-drawer__panel {
  /* Panel should be visible by default, not hidden */
  transform: translateY(0);
}
/* Mobile: left/right use bottom transform */
@media (max-width: 640px) {
  .ina-drawer--position-left .ina-drawer__panel,
  .ina-drawer--position-right .ina-drawer__panel {
    transform: translateY(0);
  }
}
/* Variant styles */
.ina-drawer--variant-glass .ina-drawer__panel {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
}
.ina-drawer--variant-floating .ina-drawer__panel {
  margin: var(--ina-spacing-8);
  border-radius: var(--ina-radius-xl);
  box-shadow: var(--ina-shadow-2xl);
}
.ina-drawer--variant-minimal .ina-drawer__panel {
  box-shadow: none;
  border: 1px solid var(--ina-stroke-primary);
}
/* Size variants with max-width */
.ina-drawer__panel--fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-drawer__backdrop {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .ina-drawer__panel {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-drawer__header {
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-drawer__title {
    color: var(--ina-content-dark-primary);
  }

  .ina-drawer__close-button {
    color: var(--ina-content-secondary);
  }

  .ina-drawer__close-button:hover {
    background-color: var(--ina-neutral-800);
    color: var(--ina-content-dark-primary);
  }

  .ina-drawer__footer {
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-drawer--variant-glass .ina-drawer__panel {
    background-color: rgba(0, 0, 0, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .ina-drawer--variant-minimal .ina-drawer__panel {
    border-color: var(--ina-stroke-primary-dark);
  }
} */
/* Accessibility improvements */
.ina-drawer__close-button:focus-visible {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-drawer__panel {
    border: 2px solid var(--ina-content-primary);
  }

  .ina-drawer__header,
  .ina-drawer__footer {
    border-width: 2px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-drawer,
  .ina-drawer__backdrop,
  .ina-drawer__panel,
  .ina-drawer__close-button {
    animation: none;
    transition: none;
  }

  .ina-drawer__panel {
    transform: none !important;
  }
}
/* Print styles */
@media print {
  .ina-drawer {
    display: none;
  }
}
/**
 * FieldInputTable Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-field-input-table {
  /* Base container styling */
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2);
}
/* Input wrapper */
.ina-field-input-table__wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Label styling */
.ina-field-input-table__label {
  font-size: var(--ina-font-sm);
  color: var(--ina-neutral-400);
  margin-bottom: var(--ina-spacing-1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: var(--ina-font-normal);
}
/* Input field styling */
.ina-field-input-table__input {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--ina-stroke-primary);
  padding: var(--ina-spacing-1) 0;
  background: transparent;
  outline: none;
  font-size: var(--ina-font-base);
  color: var(--ina-content-primary, #1f1f1f);
  transition: border-color var(--ina-transition-base);
}
.ina-field-input-table__input::-moz-placeholder {
  color: var(--ina-content-tertiary);
}
.ina-field-input-table__input::placeholder {
  color: var(--ina-content-tertiary);
}
.ina-field-input-table__input:focus {
  border-bottom-color: var(--ina-primary-500);
}
.ina-field-input-table__input:hover:not(:focus) {
  border-bottom-color: var(--ina-stroke-secondary);
}
/* Invalid/error state */
.ina-field-input-table__input--invalid {
  border-bottom-color: var(--ina-negative-500);
}
.ina-field-input-table__input--invalid:focus {
  border-bottom-color: var(--ina-negative-500);
}
/* Disabled state */
.ina-field-input-table__input--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-bottom-color: var(--ina-neutral-400);
}
.ina-field-input-table__input--disabled::-moz-placeholder {
  color: var(--ina-neutral-400);
}
.ina-field-input-table__input--disabled::placeholder {
  color: var(--ina-neutral-400);
}
/* Action buttons container */
.ina-field-input-table__actions {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-1);
  flex-shrink: 0;
}
/* Individual action buttons */
.ina-field-input-table__action-button {
  padding: var(--ina-spacing-1);
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  border-radius: var(--ina-radius-base);
  transition: background-color var(--ina-transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ina-field-input-table__action-button:hover {
  background-color: var(--ina-neutral-100);
}
.ina-field-input-table__action-button:focus {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
.ina-field-input-table__action-button:active {
  background-color: var(--ina-neutral-200);
}
/* Success/Commit button */
.ina-field-input-table__action-button--commit {
  /* Base styles applied by parent class */
}
.ina-field-input-table__action-button--commit:focus {
  outline-color: var(--ina-positive-500);
}
/* Cancel button */
.ina-field-input-table__action-button--cancel {
  /* Base styles applied by parent class */
}
.ina-field-input-table__action-button--cancel:focus {
  outline-color: var(--ina-negative-500);
}
/* Button hover states */
.ina-field-input-table__action-button--commit:hover
  .ina-field-input-table__icon--commit {
  color: var(--ina-positive-600);
}
.ina-field-input-table__action-button--cancel:hover
  .ina-field-input-table__icon--cancel {
  color: var(--ina-negative-600);
}
/* Icon styling */
.ina-field-input-table__icon {
  width: 20px;
  height: 20px;
  transition: color var(--ina-transition-base);
}
.ina-field-input-table__icon--commit {
  color: var(--ina-positive-500);
}
.ina-field-input-table__icon--cancel {
  color: var(--ina-negative-500);
}
/* Validation feedback */
.ina-field-input-table__validation-message {
  font-size: var(--ina-font-xs);
  margin-top: var(--ina-spacing-0-5);
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-1);
}
.ina-field-input-table__validation-message--error {
  color: var(--ina-negative-600);
}
.ina-field-input-table__validation-message--success {
  color: var(--ina-positive-600);
}
.ina-field-input-table__validation-message--warning {
  color: var(--ina-warning-600);
}
/* Size variants */
.ina-field-input-table--size-sm .ina-field-input-table__input {
  font-size: var(--ina-font-sm);
  padding: var(--ina-spacing-0-5) 0;
}
.ina-field-input-table--size-sm .ina-field-input-table__label {
  font-size: var(--ina-font-xs);
  margin-bottom: var(--ina-spacing-0-5);
}
.ina-field-input-table--size-sm .ina-field-input-table__icon {
  width: 16px;
  height: 16px;
}
.ina-field-input-table--size-lg .ina-field-input-table__input {
  font-size: var(--ina-font-lg);
  padding: var(--ina-spacing-2) 0;
}
.ina-field-input-table--size-lg .ina-field-input-table__label {
  font-size: var(--ina-font-base);
  margin-bottom: var(--ina-spacing-2);
}
.ina-field-input-table--size-lg .ina-field-input-table__icon {
  width: 24px;
  height: 24px;
}
/* Variant styles */
.ina-field-input-table--variant-outlined .ina-field-input-table__input {
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-base);
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
  border-bottom: 1px solid var(--ina-stroke-primary);
}
.ina-field-input-table--variant-filled .ina-field-input-table__input {
  background-color: var(--ina-neutral-50);
  border: 1px solid var(--ina-neutral-200);
  border-radius: var(--ina-radius-base);
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
}
.ina-field-input-table--variant-filled .ina-field-input-table__input:focus {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-primary-500);
}
/* Loading state */
.ina-field-input-table--loading .ina-field-input-table__input {
  opacity: 0.6;
  cursor: not-allowed;
}
.ina-field-input-table--loading .ina-field-input-table__action-button {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Compact mode - remove label */
.ina-field-input-table--compact .ina-field-input-table__wrapper {
  gap: var(--ina-spacing-1);
}
.ina-field-input-table--compact .ina-field-input-table__label {
  display: none;
}
.ina-field-input-table--compact .ina-field-input-table__input {
  padding: var(--ina-spacing-0-5) 0;
}
/* Auto-sizing input */
.ina-field-input-table__input--auto-size {
  width: 1px;
  min-width: 60px;
  max-width: 300px;
  resize: none;
}
/* Keyboard navigation */
.ina-field-input-table__input:focus[tabindex='-1'] {
  border-bottom-color: var(--ina-primary-500);
  background-color: var(--ina-primary-50);
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ina-field-input-table {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ina-spacing-2);
  }

  .ina-field-input-table__actions {
    justify-content: flex-end;
  }

  .ina-field-input-table__input {
    font-size: var(--ina-font-base);
  }
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-field-input-table__label {
    color: var(--ina-content-dark-disabled);
  }

  .ina-field-input-table__input {
    color: var(--ina-content-dark-primary);
    border-bottom-color: var(--ina-stroke-primary-dark);
  }

  .ina-field-input-table__input::placeholder {
    color: var(--ina-content-dark-placeholder);
  }

  .ina-field-input-table__input:focus {
    border-bottom-color: var(--ina-primary-400);
  }

  .ina-field-input-table__input:hover:not(:focus) {
    border-bottom-color: var(--ina-stroke-secondary-dark);
  }

  .ina-field-input-table__action-button:hover {
    background-color: var(--ina-neutral-800);
  }

  .ina-field-input-table--variant-filled .ina-field-input-table__input {
    background-color: var(--ina-neutral-900);
    border-color: var(--ina-neutral-700);
  }

  .ina-field-input-table--variant-filled .ina-field-input-table__input:focus {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-primary-400);
  }
} */
/* Focus management for accessibility */
.ina-field-input-table:focus-within .ina-field-input-table__action-button {
  opacity: 1;
}
.ina-field-input-table:not(:focus-within)
  .ina-field-input-table__action-button {
  opacity: 0.7;
}
.ina-field-input-table:not(:focus-within)
  .ina-field-input-table__action-button:hover {
  opacity: 1;
}
/* Animation for state changes */
.ina-field-input-table__input {
  transition:
    border-color var(--ina-transition-base),
    background-color var(--ina-transition-base),
    opacity var(--ina-transition-base);
}
.ina-field-input-table__action-button {
  transition:
    background-color var(--ina-transition-base),
    opacity var(--ina-transition-base),
    transform var(--ina-transition-base);
}
.ina-field-input-table__action-button:active {
  transform: scale(0.95);
}
/**
 * File Upload Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 * Sesuai dengan design Figma
 */
.ina-file-upload {
  min-width: 100%;
}
@media (min-width: 768px) {
  .ina-file-upload {
    min-width: 484px;
  }
}
.ina-file-upload__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ina-content-primary, var(--ina-neutral-800));
  margin-bottom: 8px;
}
.ina-file-upload__dropzone {
  border: 1px dashed var(--ina-stroke-primary);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  box-sizing: border-box;
}
.ina-file-upload__dropzone:hover {
  border-color: var(--ina-stroke-secondary, var(--ina-neutral-400));
  background-color: var(--ina-background-secondary, var(--ina-neutral-50));
}
.ina-file-upload__dropzone--drag-over {
  border-color: var(--ina-content-primary, var(--ina-neutral-800));
  background-color: var(--ina-background-secondary, var(--ina-neutral-50));
}
.ina-file-upload__dropzone--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ina-file-upload__input {
  display: none;
}
.ina-file-upload__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ina-file-upload__icon {
  color: var(--ina-content-primary, var(--ina-neutral-800));
  display: flex;
  align-items: center;
  justify-content: center;
}
.ina-file-upload__text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ina-file-upload__title {
  font-size: 16.618px;
  font-weight: 600;
  line-height: 23.265px;
  color: var(--ina-content-primary, var(--ina-neutral-800));
  margin: 0;
}
.ina-file-upload__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ina-content-secondary, var(--Content-Secondary));
  margin: 0;
}
.ina-file-upload__button {
  padding: 8px 16px;
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.ina-file-upload__button:hover:not(:disabled) {
  background-color: var(--ina-background-secondary);
}
.ina-file-upload__button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
/* File List */
.ina-file-upload .ina-file-upload__files {
  margin-top: 24px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ina-file-upload__file {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 12px;
  background-color: var(--ina-background-primary, var(--ina-neutral-25));
  border: 1px solid var(--ina-stroke-primary, var(--Stroke-Primary));
  border-radius: 8px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.ina-file-upload__file--error {
  border-color: var(--ina-negative-500, var(--ina-error-500));
}
.ina-file-upload__file--error .ina-file-upload__file-name,
.ina-file-upload__file--error .ina-file-upload__file-error {
  color: var(--ina-negative-500, var(--ina-error-500));
}
.ina-file-upload__file--success {
  border-color: var(--ina-success-500, var(--Success-500));
}
.ina-file-upload__file--uploading {
  border-color: var(--ina-primary-300, var(--Primary-300));
}
.ina-file-upload__file-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.ina-file-upload__file-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-top: 4px;
}
.ina-file-upload__file-icon-placeholder {
  width: 16px;
  height: 16px;
  border: 1px solid var(--ina-neutral-400);
  border-radius: 50%;
}
.ina-file-upload__file-icon--spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ina-file-upload__file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ina-file-upload__file-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ina-content-primary, var(--ina-neutral-800));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ina-file-upload__file-size {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--ina-content-secondary, var(--ina-neutral-500));
}
.ina-file-upload__file-error {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--ina-negative-500, var(--ina-error-500));
  margin-top: 4px;
}
.ina-file-upload__file-actions {
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  gap: 8px;
  flex-shrink: 0;
}
.ina-file-upload__file-retry,
.ina-file-upload__file-remove {
  background: none;
  border: none;
  color: var(--ina-negative-500, var(--ina-red-500));
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.ina-file-upload__file-retry:hover,
.ina-file-upload__file-remove:hover {
  color: var(--ina-negative-600, var(--ina-red-600));
}
.ina-file-upload__file-retry {
  color: var(--ina-primary-500, var(--ina-blue-500));
}
.ina-file-upload__file-retry:hover {
  background-color: var(--ina-primary-25, var(--ina-blue-25));
}
/* Show More Button */
.ina-file-upload__show-more {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--ina-primary-500, var(--Primary-500));
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}
.ina-file-upload__show-more:hover {
  color: var(--ina-primary-600, var(--Primary-600));
  text-decoration: underline;
}
.ina-file-upload__show-more-icon {
  transition: transform 0.2s ease;
}
.ina-file-upload__show-more-icon--expanded {
  transform: rotate(180deg);
}
/* Error Messages */
.ina-file-upload__errors {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ina-file-upload__error-message {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--ina-error-500, var(--Error-500));
  padding: 8px 12px;
  background-color: var(--ina-error-25, var(--Error-25));
  border-radius: 4px;
  border: 1px solid var(--ina-error-500, var(--Error-500));
}
/* Status Message */
.ina-file-upload__status {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.ina-file-upload__status--success {
  color: var(--ina-success-500, var(--Success-500));
}
.ina-file-upload__status--error {
  color: var(--ina-error-500, var(--Error-500));
}
.ina-file-upload__status--warning {
  color: var(--ina-warning-500, var(--Warning-500));
}
.ina-file-upload__file-icon-wrapper--success {
  color: var(--ina-positive-600, var(--ina-green-600));
}
.ina-file-upload__file-icon-wrapper--error {
  color: var(--ina-negative-500, var(--ina-red-600));
}
.ina-file-upload__file-icon-wrapper--warning {
  color: var(--ina-warning-500, var(--ina-orange-500));
}
/**
 * InputSearch Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-input-search {
  /* Base container styling */
  display: flex;
  width: 100%;
  flex-direction: column;
}
/* Label styling */
.ina-input-search__label {
  display: block;
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(
    --ina-content-primary,
    #1f1f1f
  ); /* Changed to primary to match TextField */
  margin-bottom: var(--ina-spacing-2, 0.5rem);
}
.ina-input-search__label--required .ina-input-search__asterisk {
  color: var(--ina-error-500, #f02d2d);
  margin-left: var(--ina-spacing-1, 0.25rem);
}
/* Input wrapper */
.ina-input-search__wrapper {
  position: relative;
  display: flex;
  width: 100%;
  cursor: text;
  align-items: center;
  gap: var(--ina-spacing-2); /* Changed from 3 to 2 */
  border-radius: var(--ina-radius-lg); /* Changed from xl to lg */
  border: 1px solid var(--ina-stroke-primary); /* Changed from neutral-300 */
  background-color: var(--ina-background-primary);
  padding: var(--ina-spacing-2) var(--ina-spacing-3); /* Changed to use spacing vars */
  transition: all var(--ina-transition-base);

  /* Default height matching TextField size-md */
  height: 44px;
}
/* Hover state */
.ina-input-search__wrapper:hover {
  background-color: var(--ina-neutral-50, #f8f8f7);
}
/* Focus state */
.ina-input-search__wrapper:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-content-primary, #1f1f1f);
}
.ina-input-search__wrapper--disabled {
  background-color: var(
    --ina-background-tertiary,
    #f5f5f5
  ); /* Changed to match TextField */
  border-color: var(--ina-stroke-primary, #e5e5e5) !important;
  cursor: not-allowed;
  opacity: 1; /* Reset opacity control fully via vars */
}
/* Search icon */
.ina-input-search__search-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ina-content-secondary, #525252);
}
/* Input field */
.ina-input-search__input {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--ina-font-sm, 0.875rem);
  font-family: inherit;
  color: var(--ina-content-primary, #1f1f1f);
  font-weight: var(--ina-font-normal, 400);
  min-width: 0;
}
.ina-input-search__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-input-search__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-input-search__input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* Clear button */
.ina-input-search__clear-button {
  flex-shrink: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  color: var(
    --ina-content-dark-secondary,
    #737373
  ); /* Match TextField clear button */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ina-radius-base, 0.25rem);
  transition: color var(--ina-transition-base, 200ms ease-in-out);
  background: none;
  padding: 0;
}
.ina-input-search__clear-button:hover {
  color: var(--ina-content-secondary, #525252);
  background-color: transparent; /* TextField doesn't have bg on hover for clear btn */
}
.ina-input-search__clear-button--hidden {
  display: none;
}
/* Responsive adjustments to match TextField */
@media (max-width: 767px) {
  .ina-input-search__wrapper {
    height: 40px; /* Match md size */
  }
}
@media (max-width: 639px) {
  .ina-input-search__wrapper {
    height: 36px; /* Match md size */
    padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  }

  .ina-input-search__input,
  .ina-input-search__label {
    font-size: var(--ina-font-xs, 0.75rem) !important;
  }
}
/**
 * LinearProgressIndicator Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-linear-progress-indicator {
  /* Base container styling */
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--ina-neutral-200);
  border-radius: var(--ina-radius-full);
  overflow: hidden;
}
/* Progress fill */
.ina-linear-progress-indicator__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background-color: var(--ina-primary-500);
  transition: width 0.3s ease-out;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-linear-progress-indicator__fill {
    transition: none;
  }
}
/**
 * Modal Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-modal {
  /* Base modal container - fixed overlay */
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Modal enter/exit states for React */
.ina-modal--enter {
  opacity: 0;
}
.ina-modal--enter-active {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.ina-modal--enter-active .ina-modal__dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.ina-modal--exit {
  opacity: 1;
}
.ina-modal--exit-active {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ina-modal--exit-active .ina-modal__dialog {
  opacity: 0;
  transform: scale(0.9) translateY(-20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.ina-modal--enter .ina-modal__dialog {
  opacity: 0;
  transform: scale(0.9) translateY(-20px);
}
/* Backdrop */
.ina-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
}
/* Backdrop variants */
.ina-modal__backdrop--light {
  background-color: rgba(0, 0, 0, 0.3);
}
.ina-modal__backdrop--dark {
  background-color: rgba(0, 0, 0, 0.8);
}
.ina-modal__backdrop--transparent {
  background-color: transparent;
}
/* Container wrapper */
.ina-modal__container {
  position: relative;
  z-index: 1;
}
/* Dialog container */
.ina-modal__dialog {
  position: relative;
  background-color: var(--ina-background-primary);
  border-radius: 12px;
  box-shadow: var(--ina-shadow-xl);
  border: 1px solid var(--ina-stroke-primary);
  max-height: calc(100vh - var(--ina-spacing-8));
  margin: var(--ina-spacing-4);
  display: flex;
  min-width: 480px;
  flex-direction: column;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  box-sizing: border-box;
  max-width: 90vw;
  max-height: 90vh;
}
/* Dialog size variants */
.ina-modal__dialog--size-sm {
  min-width: 480px;
  max-width: 480px;
}
.ina-modal__dialog--size-md {
  min-width: 640px;
  max-width: 640px;
}
.ina-modal__dialog--size-lg {
  min-width: 800px;
  max-width: 800px;
}
.ina-modal__dialog--size-xl {
  min-width: 1000px;
  max-width: 1000px;
}
.ina-modal__dialog--size-full {
  min-width: calc(100vw - var(--ina-spacing-8));
  margin: 0;
  height: calc(100vh - var(--ina-spacing-8));
}
/* Dialog variants */
.ina-modal__dialog--variant-basic {
  box-shadow: var(--ina-shadow-lg);
}
.ina-modal__dialog--variant-elevated {
  box-shadow: var(--ina-shadow-xxl);
}
.ina-modal__dialog--variant-outline {
  box-shadow: none;
  border-width: 2px;
}
.ina-modal__dialog--variant-glass {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Header section */
.ina-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ina-stroke-primary);
  padding: 16px 24px;
  flex-shrink: 0;
}
.ina-modal__header--no-border {
  border-bottom: none;
}
/* Title */
.ina-modal__title {
  font-size: var(--ina-font-lg);
  font-weight: var(--ina-font-semibold);
  color: var(--ina-content-primary);
  margin: 0;
  line-height: 1.3;
}
.ina-modal__title--sm {
  font-size: var(--ina-font-base);
}
.ina-modal__title--lg {
  font-size: var(--ina-font-xl);
}
/* Close button */
.ina-modal__close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  color: var(--ina-content-secondary);
}
.ina-modal__close-button:hover {
  color: var(--ina-content-primary);
}
.ina-modal__close-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
/* Body/content section */
.ina-modal__body {
  padding: 16px 24px;
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ina-neutral-400) var(--ina-neutral-100);
  /* Prevent content overflow */
  min-width: 0;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
/* Ensure all direct children respect the container width */
.ina-modal__body > * {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.ina-modal__body--with-header {
  /* When header is present, maintain consistent spacing */
}
.ina-modal__body--no-padding {
  padding: 0;
}
/* Scrollable content */
.ina-modal__body--scrollable {
  overflow-y: auto;
  max-height: 400px;
}
.ina-modal__body--scrollable::-webkit-scrollbar {
  width: 6px;
}
.ina-modal__body--scrollable::-webkit-scrollbar-track {
  background: var(--ina-neutral-100);
}
.ina-modal__body--scrollable::-webkit-scrollbar-thumb {
  background-color: var(--ina-neutral-400);
  border-radius: 3px;
}
.ina-modal__body--scrollable::-webkit-scrollbar-thumb:hover {
  background-color: var(--ina-neutral-500);
}
/* Footer section */
.ina-modal__footer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px 24px 24px 24px;
  border-top: 1px solid var(--ina-stroke-primary);
  flex-shrink: 0;
}
.ina-modal__footer--no-border {
  border-top: none;
}
.ina-modal__footer--center {
  justify-content: center;
}
.ina-modal__footer--space-between {
  justify-content: space-between;
}
/* Animation variants */
.ina-modal--animation-fade {
  opacity: 0;
  transition: opacity var(--ina-transition-duration-200) ease-out;
}
.ina-modal--animation-fade.ina-modal--open {
  opacity: 1;
}
.ina-modal--animation-scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--ina-transition-duration-200) ease-out,
    transform var(--ina-transition-base);
}
.ina-modal--animation-scale.ina-modal--open {
  opacity: 1;
  transform: scale(1);
}
.ina-modal--animation-slide-up {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--ina-transition-duration-200) ease-out,
    transform var(--ina-transition-duration-200) ease-out;
}
.ina-modal--animation-slide-up.ina-modal--open {
  opacity: 1;
  transform: translateY(0);
}
.ina-modal--animation-slide-down {
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity var(--ina-transition-duration-200) ease-out,
    transform var(--ina-transition-duration-200) ease-out;
}
.ina-modal--animation-slide-down.ina-modal--open {
  opacity: 1;
  transform: translateY(0);
}
/* Position variants */
.ina-modal--position-center {
  /* Default: centered */
}
.ina-modal--position-top {
  align-items: flex-start;
  padding-top: var(--ina-spacing-8);
}
.ina-modal--position-bottom {
  align-items: flex-end;
  padding-bottom: var(--ina-spacing-8);
}
.ina-modal--position-left {
  align-items: center;
  justify-content: flex-start;
  padding-left: var(--ina-spacing-8);
}
.ina-modal--position-right {
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--ina-spacing-8);
}
/* Loading overlay */
.ina-modal__loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  z-index: 10;
}
.ina-modal__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ina-neutral-300);
  border-top-color: var(--ina-primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Confirmation variants */
.ina-modal--confirmation .ina-modal__dialog {
  max-width: 400px;
}
.ina-modal__confirmation-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--ina-spacing-4);
}
.ina-modal__confirmation-title {
  text-align: center;
  margin-bottom: var(--ina-spacing-2);
}
.ina-modal__confirmation-message {
  text-align: center;
  color: var(--ina-content-secondary);
  margin-bottom: var(--ina-spacing-6);
}
/* Responsive adjustments */
@media (max-width: 639px) {
  .ina-modal__dialog {
    margin: var(--ina-spacing-2);
    max-height: calc(100vh - var(--ina-spacing-8));
    min-width: 420px;
    max-width: 80vw;
  }

  .ina-modal__dialog--size-full {
    margin: var(--ina-spacing-2);
    height: calc(100vh - var(--ina-spacing-4));
  }

  .ina-modal__header {
    padding: var(--ina-spacing-2) var(--ina-spacing-3);
  }

  .ina-modal__body {
    padding: var(--ina-spacing-4);
  }

  .ina-modal__footer {
    padding: var(--ina-spacing-3);
  }

  .ina-modal__footer--stacked {
    flex-direction: column-reverse;
    gap: var(--ina-spacing-2);
  }
}
@media (max-width: 480px) {
  .ina-modal__dialog {
    margin: var(--ina-spacing-1);
    max-height: calc(100vh - var(--ina-spacing-8));
    min-width: 90vw;
    max-width: 90vw;
  }

  .ina-modal__title {
    font-size: var(--ina-font-base);
  }

  .ina-modal__body {
    padding: var(--ina-spacing-3);
  }
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-modal__dialog {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-modal__dialog--variant-glass {
    background-color: rgba(0, 0, 0, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .ina-modal__header {
    border-bottom-color: var(--ina-stroke-primary-dark);
  }

  .ina-modal__title {
    color: var(--ina-content-dark-primary);
  }

  .ina-modal__close-button {
    color: var(--ina-content-secondary);
  }

  .ina-modal__close-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--ina-content-dark-primary);
  }

  .ina-modal__footer {
    border-top-color: var(--ina-stroke-primary-dark);
  }

  .ina-modal__loading-overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .ina-modal__spinner {
    border-color: var(--ina-neutral-600);
    border-top-color: var(--ina-primary-400);
  }
} */
/* Accessibility improvements */
.ina-modal[aria-hidden='true'] {
  visibility: hidden;
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-modal__backdrop {
    background-color: rgba(0, 0, 0, 0.9);
  }

  .ina-modal__dialog {
    border-width: 2px;
    border-color: var(--ina-content-primary);
  }

  .ina-modal__close-button {
    border: 1px solid currentColor;
  }
}
.ina-modal-confirmation {
  width: 80vw;
  max-width: 400px;
}
@media (min-width: 768px) {
  .ina-modal-confirmation {
    width: 560px;
    max-width: 560px;
  }
}
.ina-modal-confirmation__body {
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-4);
}
.ina-modal-confirmation__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ina-spacing-4);
}
.ina-modal-confirmation__confirm {
  background-color: var(--ina-primary-primary);
  color: var(--ina-white);
  border: 1px solid var(--ina-stroke-primary);
}
.ina-modal-confirmation__confirm:hover {
  background-color: var(--ina-primary-700);
}
.ina-modal-confirmation__confirm:focus {
  outline: 2px solid var(--ina-primary-25);
  outline-offset: 2px;
}
/* =========================== */
/* MONTH PICKER STYLES         */
/* =========================== */
.ina-month-picker {
  position: relative;
  display: inline-block;
}
/* Trigger Button */
.ina-month-picker__trigger {
  display: flex;
  align-items: center;
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-lg);
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-semibold, 600);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
  width: -moz-fit-content;
  width: fit-content;
  min-width: 40px;
  gap: var(--ina-spacing-2);
}
.ina-month-picker__trigger--size-sm {
  height: 32px;
  min-width: 50px;
}
.ina-month-picker__trigger--size-md {
  height: 36px;
}
/* Desktop >= 768px */
@media (min-width: 768px) {
  .ina-month-picker__trigger {
    padding: var(--ina-spacing-2) var(--ina-spacing-4);
  }
  .ina-month-picker__trigger-md {
    height: 44px;
  }
}
.ina-month-picker__trigger:hover {
  background-color: var(--ina-background-secondary);
}
.ina-month-picker__trigger:focus {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
.ina-month-picker__trigger--disabled {
  background-color: var(--ina-background-secondary);
  color: var(--ina-content-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-month-picker__trigger--disabled:hover {
  background-color: var(--ina-background-secondary);
  border-color: var(--ina-stroke-primary);
}
.ina-month-picker__trigger--readonly {
  background-color: var(--ina-background-secondary);
  cursor: default;
}
.ina-month-picker__trigger--readonly:hover {
  background-color: var(--ina-background-secondary);
  border-color: var(--ina-stroke-primary);
}
/* Trigger Text */
.ina-month-picker__trigger-text {
  flex: 1;
  text-align: left;
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: inherit;
}
/* Icon */
.ina-month-picker__icon {
  flex-shrink: 0;
  color: var(--ina-content-secondary);
}
/* Chevron */
.ina-month-picker__chevron {
  flex-shrink: 0;
  color: var(--ina-content-secondary);
  transition: transform var(--ina-transition-fast);
}
.ina-month-picker__chevron--open {
  transform: rotate(180deg);
}
/* Clear Button */
.ina-month-picker__clear-button {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-secondary);
  transition: color var(--ina-transition-base);
}
.ina-month-picker__clear-button:hover:not(:disabled) {
  color: var(--ina-content-secondary);
}
.ina-month-picker__clear-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ina-month-picker__clear-icon {
  width: 16px;
  height: 16px;
}
/* =========================== */
/* DESKTOP PANEL               */
/* =========================== */
/* Panel - Desktop only */
.ina-month-picker__panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--ina-spacing-1);
  background-color: var(
    --ina-background-primary
  ) !important; /* Ensure solid background */
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-xl);
  box-shadow: var(--ina-shadow-lg);
  z-index: 10005; /* Higher than DatePicker panel (10004) */
  width: 240px;
  max-width: calc(
    100vw - 16px
  ); /* Ensure panel doesn't exceed viewport width */
  padding: var(--ina-spacing-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ina-transition-fast);
  /* Ensure panel is not clipped by parent containers */
  max-height: 300px;
  overflow-y: auto;
  /* Ensure panel content is solid */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ina-month-picker__panel--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Right-aligned panel positioning */
.ina-month-picker__panel--right-aligned {
  left: auto !important;
  right: 0 !important;
}
/* Month Grid - 3x4 layout */
.ina-month-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ina-spacing-1);
  background-color: var(--ina-background-primary);
  border-radius: var(--ina-radius-base);
}
/* Month Options */
.ina-month-picker__month-option {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary);
  background-color: var(--ina-white);
  border: 1px solid var(--ina-border-light);
  border-radius: var(--ina-radius-lg);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
  height: 40px;
  width: 40px;
  aspect-ratio: 1;
}
.ina-month-picker__month-option:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
.ina-month-picker__month-option:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  z-index: 1;
}
.ina-month-picker__month-option--selected,
.ina-month-picker__month-option.ina-month-picker__month-option--selected:hover {
  background-color: var(--ina-primary-primary, #1f1f1f);
  color: var(--ina-base-white, #ffffff);
  font-weight: var(--ina-font-medium);
}
.ina-month-picker__month-option--hovered:not(
  .ina-month-picker__month-option--selected
) {
  background-color: var(--ina-background-secondary);
  color: var(--ina-content-primary);
}
.ina-month-picker__month-option:disabled {
  color: var(--ina-content-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}
.ina-month-picker__month-option--disabled {
  color: var(--ina-content-tertiary);
  cursor: not-allowed;
  opacity: 0.4;
  background-color: var(--ina-background-secondary);
}
.ina-month-picker__month-option--disabled:hover {
  background-color: var(--ina-background-secondary);
  opacity: 0.4;
}
/* =========================== */
/* DARK MODE SUPPORT           */
/* =========================== */
[data-theme='dark'] .ina-month-picker__trigger {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-stroke-primary);
  color: var(--ina-content-primary);
}
[data-theme='dark'] .ina-month-picker__panel {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-stroke-primary);
  box-shadow: var(--ina-shadow-lg);
}
[data-theme='dark'] .ina-month-picker__month-option {
  color: var(--ina-content-primary);
}
[data-theme='dark'] .ina-month-picker__month-option:hover:not(:disabled) {
  background-color: var(--ina-background-secondary);
}
[data-theme='dark'] .ina-month-picker__month-option--selected:hover {
  background-color: var(--ina-primary-600);
}
[data-theme='dark']
  .ina-month-picker__month-option--hovered:not(
    .ina-month-picker__month-option--selected
  ) {
  background-color: var(--ina-primary-100);
  color: var(--ina-primary-800);
}
[data-theme='dark'] .ina-month-picker__month-option--disabled {
  color: var(--ina-content-tertiary);
  opacity: 0.4;
  background-color: var(--ina-background-secondary);
}
[data-theme='dark'] .ina-month-picker__month-option--disabled:hover {
  background-color: var(--ina-background-secondary);
  opacity: 0.4;
}
/* =========================== */
/* RESPONSIVE DESIGN           */
/* =========================== */
/* Mobile adjustments */
@media (max-width: 640px) {
  .ina-month-picker__panel {
    /* Center panel horizontally in viewport */
    width: calc(100vw - 2rem) !important;
    max-width: 152px !important;
    /* Ensure panel doesn't exceed viewport */
    padding: var(--ina-spacing-2);
  }

  .ina-month-picker__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ina-spacing-1);
  }

  .ina-month-picker__month-option {
    min-height: 32px;
    height: 32px;
    font-size: 10px;
    padding: var(--ina-spacing-1);
    width: 40px;
  }
}
/* =========================== */
/* MULTIPLE CHOICE GRID STYLES */
/* =========================== */
.ina-multiple-choice-grid {
  background-color: var(--ina-background-primary);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-lg);
  overflow: hidden;
  box-shadow: var(--ina-shadow-sm);
  width: 100%;
  max-width: 100%;
  /* Allow horizontal scroll if content is wider than viewport */
  overflow-x: auto;
  /* Ensure minimum width for proper grid layout, but allow shrinking */
  min-width: 0;
}
/* Header Row */
.ina-multiple-choice-grid__header {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(120px, auto));
  background-color: var(--ina-background-secondary);
  border-bottom: 1px solid var(--ina-stroke-primary);
  width: 100%;
  min-width: -moz-max-content;
  min-width: max-content;
}
.ina-multiple-choice-grid__header-cell {
  padding: var(--ina-spacing-4) var(--ina-spacing-3);
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-semibold);
  color: var(--ina-content-primary);
  text-align: center;
  border-right: 1px solid var(--ina-stroke-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  white-space: nowrap;
  overflow: visible;
  line-height: 1.4;
}
.ina-multiple-choice-grid__header-cell:last-child {
  border-right: none;
}
.ina-multiple-choice-grid__header-cell--empty {
  background-color: var(--ina-background-primary);
  border-right: 1px solid var(--ina-stroke-primary);
}
/* Data Rows */
.ina-multiple-choice-grid__row {
  display: grid;
  grid-template-columns: 200px repeat(auto-fit, minmax(120px, auto));
  border-bottom: 1px solid var(--ina-stroke-primary);
  transition: background-color var(--ina-transition-fast);
  width: 100%;
  min-width: -moz-max-content;
  min-width: max-content;
}
.ina-multiple-choice-grid__row:last-child {
  border-bottom: none;
}
.ina-multiple-choice-grid__row:hover {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
.ina-multiple-choice-grid__row:last-child:hover {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
/* Row Label */
.ina-multiple-choice-grid__row-label {
  padding: var(--ina-spacing-4) var(--ina-spacing-3);
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary);
  border-right: 1px solid var(--ina-stroke-primary);
  display: flex;
  align-items: center;
  background-color: var(--ina-background-primary);
  min-height: 48px;
  white-space: nowrap;
  overflow: visible;
  line-height: 1.4;
  text-align: left;
}
/* Radio Button Cells */
.ina-multiple-choice-grid__cell {
  padding: var(--ina-spacing-3);
  border-right: 1px solid var(--ina-stroke-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.ina-multiple-choice-grid__cell:last-child {
  border-right: none;
}
/* Custom Radio Button Styling */
.ina-multiple-choice-grid__radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.ina-multiple-choice-grid__radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
.ina-multiple-choice-grid__radio-custom {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ina-stroke-secondary);
  border-radius: 50%;
  background-color: var(--ina-background-primary);
  transition: all var(--ina-transition-base);
  position: relative;
}
.ina-multiple-choice-grid__radio-input:checked
  + .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-primary-500);
  background-color: var(--ina-primary-500);
}
.ina-multiple-choice-grid__radio-input:checked
  + .ina-multiple-choice-grid__radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ina-background-primary);
}
.ina-multiple-choice-grid__radio-input:focus
  + .ina-multiple-choice-grid__radio-custom {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
.ina-multiple-choice-grid__radio-input:focus:not(:focus-visible)
  + .ina-multiple-choice-grid__radio-custom {
  outline: none;
}
.ina-multiple-choice-grid__radio-input:disabled
  + .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-stroke-tertiary);
  background-color: var(--ina-background-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-multiple-choice-grid__radio-input:disabled:checked
  + .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-stroke-tertiary);
  background-color: var(--ina-stroke-tertiary);
}
.ina-multiple-choice-grid__radio-input:disabled:checked
  + .ina-multiple-choice-grid__radio-custom::after {
  background-color: var(--ina-background-secondary);
}
.ina-multiple-choice-grid__radio-label:hover:not(
    :has(.ina-multiple-choice-grid__radio-input:disabled)
  )
  .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-primary-400);
}
.ina-multiple-choice-grid__radio-label:hover:not(
    :has(.ina-multiple-choice-grid__radio-input:disabled)
  )
  .ina-multiple-choice-grid__radio-input:checked
  + .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-primary-600);
  background-color: var(--ina-primary-600);
}
/* Dark Mode Support */
[data-theme='dark'] .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-stroke-secondary);
  background-color: var(--ina-background-primary);
}
[data-theme='dark']
  .ina-multiple-choice-grid__radio-input:checked
  + .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-primary-400);
  background-color: var(--ina-primary-400);
}
[data-theme='dark']
  .ina-multiple-choice-grid__radio-input:checked
  + .ina-multiple-choice-grid__radio-custom::after {
  background-color: var(--ina-background-primary);
}
[data-theme='dark']
  .ina-multiple-choice-grid__radio-input:focus
  + .ina-multiple-choice-grid__radio-custom {
  outline-color: var(--ina-primary-400);
}
[data-theme='dark']
  .ina-multiple-choice-grid__radio-input:disabled
  + .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-stroke-tertiary);
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-multiple-choice-grid__radio-input:disabled:checked
  + .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-stroke-tertiary);
  background-color: var(--ina-stroke-tertiary);
}
[data-theme='dark']
  .ina-multiple-choice-grid__radio-input:disabled:checked
  + .ina-multiple-choice-grid__radio-custom::after {
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-multiple-choice-grid__radio-label:hover:not(
    :has(.ina-multiple-choice-grid__radio-input:disabled)
  )
  .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-primary-300);
}
[data-theme='dark']
  .ina-multiple-choice-grid__radio-label:hover:not(
    :has(.ina-multiple-choice-grid__radio-input:disabled)
  )
  .ina-multiple-choice-grid__radio-input:checked
  + .ina-multiple-choice-grid__radio-custom {
  border-color: var(--ina-primary-300);
  background-color: var(--ina-primary-300);
}
/* Disabled State */
.ina-multiple-choice-grid--disabled {
  opacity: 0.6;
  pointer-events: none;
}
.ina-multiple-choice-grid--disabled .ina-multiple-choice-grid__row:hover {
  background-color: transparent;
}
/* Responsive Design */
@media (max-width: 768px) {
  .ina-multiple-choice-grid {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
  }

  .ina-multiple-choice-grid__header,
  .ina-multiple-choice-grid__row {
    grid-template-columns: 150px repeat(auto-fit, minmax(100px, auto));
    min-width: -moz-max-content;
    min-width: max-content;
  }

  .ina-multiple-choice-grid__header-cell,
  .ina-multiple-choice-grid__row-label,
  .ina-multiple-choice-grid__cell {
    padding: var(--ina-spacing-3) var(--ina-spacing-2);
    min-height: 44px;
    font-size: var(--ina-font-xs);
  }

  .ina-multiple-choice-grid__header-cell,
  .ina-multiple-choice-grid__row-label {
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  .ina-multiple-choice-grid {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
  }

  .ina-multiple-choice-grid__header,
  .ina-multiple-choice-grid__row {
    grid-template-columns: 120px repeat(auto-fit, minmax(80px, auto));
    min-width: -moz-max-content;
    min-width: max-content;
  }

  .ina-multiple-choice-grid__header-cell,
  .ina-multiple-choice-grid__row-label,
  .ina-multiple-choice-grid__cell {
    padding: var(--ina-spacing-2);
    min-height: 40px;
  }

  .ina-multiple-choice-grid__header-cell,
  .ina-multiple-choice-grid__row-label {
    white-space: nowrap;
  }
}
/* Dark Mode Support */
[data-theme='dark'] .ina-multiple-choice-grid {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-stroke-primary);
}
[data-theme='dark'] .ina-multiple-choice-grid__header {
  background-color: var(--ina-background-secondary);
  border-bottom-color: var(--ina-stroke-primary);
}
[data-theme='dark'] .ina-multiple-choice-grid__header-cell {
  color: var(--ina-content-primary);
  border-right-color: var(--ina-stroke-primary);
}
[data-theme='dark'] .ina-multiple-choice-grid__header-cell--empty {
  background-color: var(--ina-background-primary);
  border-right-color: var(--ina-stroke-primary);
}
[data-theme='dark'] .ina-multiple-choice-grid__row {
  border-bottom-color: var(--ina-stroke-primary);
}
[data-theme='dark'] .ina-multiple-choice-grid__row:hover {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
[data-theme='dark'] .ina-multiple-choice-grid__row-label {
  color: var(--ina-content-primary);
  border-right-color: var(--ina-stroke-primary);
  background-color: var(--ina-background-primary);
}
[data-theme='dark'] .ina-multiple-choice-grid__cell {
  border-right-color: var(--ina-stroke-primary);
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
  .ina-multiple-choice-grid {
    border-width: 2px;
  }

  .ina-multiple-choice-grid__header-cell,
  .ina-multiple-choice-grid__row-label,
  .ina-multiple-choice-grid__cell {
    border-right-width: 2px;
  }

  .ina-multiple-choice-grid__row {
    border-bottom-width: 2px;
  }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .ina-multiple-choice-grid__row {
    transition: none;
  }
}
/* OneTimePassword Component Styles */
/* Base container */
.ina-one-time-password {
  display: flex;
  flex-direction: column;
  border-radius: var(--ina-rounded-lg, 8px);
  background-color: var(--ina-background-primary, #ffffff);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
/* Title */
.ina-one-time-password__title {
  font-size: 20px;
  font-weight: 600; /* semibold */
  color: var(--ina-content-primary, #1f1f1f);
  margin-bottom: 16px;
}
/* Description */
.ina-one-time-password__description {
  font-size: 14px;
  font-weight: 400; /* normal */
  color: var(--ina-content-secondary, #525252);
  margin-bottom: 16px;
}
/* Input container */
.ina-one-time-password__container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  min-width: -moz-max-content;
  min-width: max-content;
}
/* Individual input field */
.ina-one-time-password__input {
  flex: 0 0 auto;
  width: 44px; /* Auto width based on content */
  height: 44px;
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-rounded-lg, 8px);
  background-color: var(--ina-background-primary, #ffffff);
  font-size: 24px;
  font-weight: 500;
  color: var(--ina-content-primary, #1f1f1f);
  text-align: center;
  outline: none;
  transition: all var(--ina-transition-base, 200ms ease-in-out);
  font-family: inherit;
  margin: 3px;
}
/* Hover state */
.ina-one-time-password__input:hover:not(:disabled):not(:-moz-read-only) {
  background-color: var(--ina-neutral-50, #f8f8f7);
}
.ina-one-time-password__input:hover:not(:disabled):not(:read-only) {
  background-color: var(--ina-neutral-50, #f8f8f7);
}
/* Focus state */
.ina-one-time-password__input:focus {
  border-color: var(--ina-content-primary, #1f1f1f);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  background-color: var(--ina-background-primary, #ffffff);
}
/* Error/Invalid state */
.ina-one-time-password__input--error {
  border-color: var(--ina-negative-500, #f02d2d);
}
.ina-one-time-password__input--error:focus {
  border-color: var(--ina-negative-500, #f02d2d);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
}
/* Disabled state */
.ina-one-time-password__input:disabled {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  border-color: var(--ina-stroke-primary, #e5e5e5) !important;
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--ina-content-tertiary, #a3a3a3);
}
/* Readonly state */
.ina-one-time-password__input[readonly] {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  cursor: default;
}
/* Helper text */
.ina-one-time-password__helper-text {
  font-size: 14px;
  font-weight: 400; /* normal */
  color: var(--ina-content-primary, #1f1f1f);
}
/* Helper text error state */
.ina-one-time-password__helper-text--error {
  color: var(--ina-negative-500, #f02d2d);
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ina-one-time-password {
    padding: 12px 8px;
    max-width: 100%;
  }

  .ina-one-time-password__input {
    width: 40px;
    height: 40px;
    font-size: 20px;
    padding: 0 12px;
  }

  .ina-one-time-password__container {
    gap: 12px;
    min-width: -moz-max-content;
    min-width: max-content;
  }
}
/**
 * Pagination Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-pagination {
  /* Base container styling */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--ina-spacing-2);
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-normal);
}
.ina-pagination__page-size-container {
  display: none;
}
.ina-pagination__page-info {
  display: none;
}
@media (min-width: 580px) {
  .ina-pagination {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
  .ina-pagination__page-size-container {
    display: flex;
  }
  .ina-pagination__page-info {
    display: block;
  }
}
@media (min-width: 1280px) {
  .ina-pagination {
    font-size: var(--ina-font-sm);
    font-weight: var(--ina-font-medium);
  }
}
/* Full width layout (untuk Table) */
.ina-pagination--full-width {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px; /* 12px gap antara nav container dan page size container */
}
@media (min-width: 580px) {
  .ina-pagination.ina-pagination--full-width {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
}
/* Navigation container */
.ina-pagination__nav-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ina-spacing-2);
  justify-content: space-between;
}
@media (min-width: 580px) {
  .ina-pagination__nav-container {
    justify-content: flex-start;
  }
}
@media (min-width: 1024px) {
  .ina-pagination__nav-container {
    gap: var(--ina-spacing-4);
  }
}
/* Page info text */
.ina-pagination__page-info {
  color: var(--ina-content-primary);
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  display: flex;
  align-items: center;
}
/* Page info input */
.ina-table__search-controls {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2);
  padding: var(--ina-spacing-1);
}
.ina-pagination__page-input {
  min-width: 28px;
  text-align: center;
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-md);
  padding: var(--ina-spacing-1);
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  font-size: inherit;
  font-weight: inherit;
  margin: 0 var(--ina-spacing-1-5);
  transition:
    border-color var(--ina-transition-base),
    box-shadow var(--ina-transition-base);
}
.ina-pagination__page-input:focus {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
.ina-pagination__page-input--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Remove arrows for input type number */
.ina-pagination__page-input::-webkit-outer-spin-button,
.ina-pagination__page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ina-pagination__page-input[type='number'] {
  -moz-appearance: textfield;
}
/* Navigation buttons container */
.ina-pagination__nav-buttons {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-1);
}
/* Individual navigation buttons */
.ina-pagination__nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 var(--ina-spacing-0-5);
  border-radius: var(--ina-radius-md);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: var(--ina-background-primary);
  transition:
    border-color var(--ina-transition-base),
    background-color var(--ina-transition-base),
    color var(--ina-transition-base);
}
@media (min-width: 1280px) {
  .ina-pagination__nav-button {
    min-width: 32px;
    min-height: 32px;
    border-radius: var(--ina-radius-lg);
  }
}
/* Navigation button states */
.ina-pagination__nav-button--enabled {
  color: var(--ina-content-primary);
}
.ina-pagination__nav-button--enabled:hover {
  background-color: var(--ina-background-secondary);
}
.ina-pagination__nav-button--enabled:focus {
  outline: 1px solid var(--ina-content-primary);
  outline-offset: 2px;
}
.ina-pagination__nav-button--enabled:active {
  background-color: var(--ina-neutral-50);
}
.ina-pagination__nav-button--disabled {
  color: var(--ina-neutral-400);
  cursor: not-allowed;
  opacity: 0.5;
}
.ina-pagination__nav-button--disabled:hover {
  background-color: transparent;
}
/* Page number buttons */
.ina-pagination__page-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 var(--ina-spacing-0-5);
  border: 1px solid transparent;
  border-radius: var(--ina-radius-md);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--ina-content-primary);
  font-size: inherit;
  font-weight: inherit;
  background-color: var(--ina-background-primary);
  transition:
    border-color var(--ina-transition-base),
    background-color var(--ina-transition-base),
    color var(--ina-transition-base);
}
@media (min-width: 1280px) {
  .ina-pagination__page-button {
    min-width: 32px;
    min-height: 32px;
    border-radius: var(--ina-radius-lg);
  }
}
/* Active page button */
.ina-pagination__page-button--active {
  border-color: var(--ina-stroke-tertiary);
  background-color: var(--ina-background-primary);
}
/* Enabled page button */
.ina-pagination__page-button--enabled {
  border-color: transparent;
}
.ina-pagination__page-button--enabled:hover {
  border-color: var(--ina-stroke-primary);
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
.ina-pagination__page-button--enabled:focus {
  outline: 2px solid var(--ina-content-primary);
  outline-offset: 2px;
}
.ina-pagination__page-button--enabled:active {
  background-color: var(--ina-neutral-200);
}
/* Disabled page buttons */
.ina-pagination__page-button--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ina-pagination__nav-button.ina-pagination__nav-button--disabled {
  border-color: transparent;
}
.ina-pagination__page-button--disabled:hover {
  border-color: transparent;
  background-color: transparent;
}
/* Page size controls */
.ina-pagination__page-size-container {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-4);
  margin-top: var(--ina-spacing-2);
}
@media (min-width: 640px) {
  .ina-pagination__page-size-container {
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .ina-pagination__page-size-container {
    margin-right: var(--ina-spacing-8);
  }
}
/* Full width: page size di kiri, nav di kanan */
.ina-pagination--full-width .ina-pagination__page-size-container {
  margin-top: 0; /* Gap 12px sudah diatur di parent */
  margin-right: 0;
  order: 2; /* Di bawah nav container pada mobile */
}
@media (min-width: 640px) {
  .ina-pagination--full-width .ina-pagination__page-size-container {
    order: 1; /* Di kiri pada desktop */
    margin-right: 0;
  }
}
/* Full width: nav container di kanan */
.ina-pagination--full-width .ina-pagination__nav-container {
  order: 1; /* Di atas page size container pada mobile */
}
@media (min-width: 640px) {
  .ina-pagination--full-width .ina-pagination__nav-container {
    order: 2; /* Di kanan pada desktop */
  }
}
/* Page size label */
.ina-pagination__page-size-label {
  color: var(--ina-content-primary);
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
}
/* Page size select */
.ina-pagination__page-size-select {
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-md);
  text-align: center;
  padding: var(--ina-spacing-1) var(--ina-spacing-2);
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--ina-transition-base),
    box-shadow var(--ina-transition-base),
    opacity var(--ina-transition-base);
}
.ina-pagination__page-size-select:hover {
  border-color: var(--ina-stroke-tertiary);
}
.ina-pagination__page-size-select:focus {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
.ina-pagination__page-size-select--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ina-pagination__page-size-select--disabled:hover {
  border-color: var(--ina-stroke-primary);
  box-shadow: none;
}
/* Icon styling for navigation buttons */
.ina-pagination__nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* Loading state */
.ina-pagination--loading .ina-pagination__nav-button,
.ina-pagination--loading .ina-pagination__page-button {
  opacity: 0.6;
  cursor: not-allowed;
}
.ina-pagination--loading .ina-pagination__nav-button:hover,
.ina-pagination--loading .ina-pagination__page-button:hover {
  background-color: transparent;
}
/* Compact variant */
.ina-pagination--compact .ina-pagination__nav-button,
.ina-pagination--compact .ina-pagination__page-button {
  min-width: 20px;
  min-height: 20px;
  padding: 0 var(--ina-spacing-1);
}
.ina-pagination--compact .ina-pagination__nav-icon {
  width: 14px;
  height: 14px;
}
/* Spacious variant */
.ina-pagination--spacious .ina-pagination__nav-button,
.ina-pagination--spacious .ina-pagination__page-button {
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--ina-spacing-2);
}
.ina-pagination--spacious .ina-pagination__nav-icon {
  width: 18px;
  height: 18px;
}
/* Responsive adjustments */
@media (min-width: 1024px) {
  .ina-pagination__nav-button,
  .ina-pagination__page-button {
    min-width: 28px;
    min-height: 28px;
  }

  .ina-pagination__nav-icon {
    width: 14px;
    height: 14px;
  }
}
/* Accessibility improvements */
.ina-pagination__nav-button:focus-visible:not(
    .ina-pagination__nav-button--disabled
  ),
.ina-pagination__page-button:focus-visible:not(
    .ina-pagination__page-button--disabled
  ),
.ina-pagination__page-size-select:focus-visible:not(
    .ina-pagination__page-size-select--disabled
  ),
.ina-pagination__page-input:focus-visible:not(
    .ina-pagination__page-input--disabled
  ) {
  background-color: var(--ina-neutral-100);
  border: 2px solid var(--ina-primary-600, #0968f6);
  outline: none;
  box-shadow: none;
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-pagination__nav-button,
  .ina-pagination__page-button {
    border-width: 2px;
  }

  .ina-pagination__nav-button--disabled,
  .ina-pagination__page-button--disabled {
    opacity: 0.3;
  }

  .ina-pagination__page-button--active {
    border-width: 2px;
    font-weight: var(--ina-font-bold);
  }
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-pagination__page-info {
    color: var(--ina-content-dark-primary);
  }

  .ina-pagination__nav-button--enabled {
    color: var(--ina-content-dark-primary);
  }

  .ina-pagination__nav-button--disabled {
    color: var(--ina-content-dark-disabled);
  }

  .ina-pagination__page-button {
    color: var(--ina-content-dark-primary);
  }

  .ina-pagination__page-button--active {
    border-color: var(--ina-content-dark-primary);
  }

  .ina-pagination__page-size-label {
    color: var(--ina-content-dark-primary);
  }

  .ina-pagination__page-size-select {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
    color: var(--ina-content-dark-primary);
  }

  .ina-pagination__nav-button--enabled:hover,
  .ina-pagination__page-button--enabled:hover {
    background-color: var(--ina-neutral-800);
  }
} */
/* Print styles */
@media print {
  .ina-pagination {
    display: none;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-pagination__nav-button,
  .ina-pagination__page-button,
  .ina-pagination__page-size-select {
    transition: none;
  }
}
/**
 * PasswordInput Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-password-input {
  /* Base container styling */
  display: flex;
  flex-direction: column;
}
/* Label styling */
.ina-password-input__label {
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(--ina-content-primary, #1f1f1f);
  margin-bottom: var(--ina-spacing-2, 0.5rem);
}
.ina-password-input__required {
  color: var(--ina-negative-500, #f02d2d);
  display: inline;
  margin-left: var(--ina-spacing-1, 0.25rem);
}
/* Input wrapper */
.ina-password-input__wrapper {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2, 0.5rem);
  border-radius: var(--ina-radius-lg, 0.5rem);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  background-color: var(--ina-background-primary, #ffffff);
  transition:
    border-color var(--ina-transition-base, 200ms ease-in-out),
    box-shadow var(--ina-transition-base, 200ms ease-in-out);
}
/* Size variants */
.ina-password-input__wrapper--size-sm {
  /* Desktop >= 768px */
  height: 40px;
}
.ina-password-input__wrapper--size-md {
  /* Desktop >= 768px */
  height: 44px;
}
.ina-password-input__wrapper--size-lg {
  /* Desktop >= 768px */
  height: 48px;
}
/* Responsive adjustments */
@media (max-width: 767px) {
  .ina-password-input__wrapper--size-sm {
    height: 36px;
  }

  .ina-password-input__wrapper--size-md {
    height: 40px;
  }

  .ina-password-input__wrapper--size-lg {
    height: 44px;
  }
}
@media (max-width: 639px) {
  .ina-password-input__wrapper--size-sm {
    height: 32px;
  }

  .ina-password-input__wrapper--size-md {
    height: 36px;
  }

  .ina-password-input__wrapper--size-lg {
    height: 40px;
  }
}
/* Status-based input wrapper colors */
.ina-password-input__wrapper.ina-password-input__wrapper--neutral {
  border-color: var(--ina-stroke-primary);
}
.ina-password-input__wrapper.ina-password-input__wrapper--neutral:focus-within {
  border-color: var(--ina-content-primary, #1f1f1f);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f) !important;
}
.ina-password-input__wrapper.ina-password-input__wrapper--error {
  border-color: var(--ina-negative-500);
}
.ina-password-input__wrapper.ina-password-input__wrapper--error:focus-within {
  border-color: var(--ina-negative-600, #d50b0b);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
}
.ina-password-input__wrapper.ina-password-input__wrapper--warning {
  border-color: var(--ina-warning-500);
}
.ina-password-input__wrapper.ina-password-input__wrapper--warning:focus-within {
  border-color: var(--ina-warning-600, #855f00);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-warning-500, #eebb04) !important;
}
.ina-password-input__wrapper.ina-password-input__wrapper--success {
  border-color: var(--ina-positive-600);
}
.ina-password-input__wrapper.ina-password-input__wrapper--success:focus-within {
  border-color: var(--ina-positive-600, #288034);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
}
/* Prefix icon */
.ina-password-input__prefix-icon {
  flex-shrink: 0;
  color: var(--ina-content-secondary, #525252);
}
/* Input field */
.ina-password-input__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-content-primary, #1f1f1f);
  min-width: 0;
}
.ina-password-input__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-password-input__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-password-input__input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* Action buttons container */
.ina-password-input__actions {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-1);
  flex-shrink: 0;
}
/* Action buttons (clear and toggle visibility) */
.ina-password-input__action-button {
  flex-shrink: 0;
  padding: var(--ina-spacing-1);
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--ina-radius-base, 0.25rem);
  transition: color var(--ina-transition-base, 200ms ease-in-out);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-secondary, #525252);
}
.ina-password-input__action-button:hover:not(:disabled) {
  color: var(--ina-content-secondary);
}
.ina-password-input__action-button:focus {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
.ina-password-input__action-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* Action button icons */
.ina-password-input__clear-icon {
  width: 16px;
  height: 16px;
}
.ina-password-input__visibility-icon {
  width: 20px;
  height: 20px;
}
/* Status message area */
.ina-password-input__status-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--ina-font-xs);
  min-height: 16px;
}
/* Status messages */
.ina-password-input .ina-password-input__status-message {
  flex: 1;
  color: var(--ina-content-secondary);
  padding-top: var(--ina-spacing-1, 0.25rem);
}
.ina-password-input
  .ina-password-input__status-message.ina-password-input__status-message--error {
  color: var(--ina-negative-500);
}
.ina-password-input
  .ina-password-input__status-message.ina-password-input__status-message--warning {
  color: var(--ina-warning-500);
}
.ina-password-input
  .ina-password-input__status-message.ina-password-input__status-message--success {
  color: var(--ina-positive-600);
}
/* Character count */
.ina-password-input__character-count {
  color: var(--ina-content-secondary, #525252);
  font-size: var(--ina-font-xs, 0.75rem);
  font-weight: var(--ina-font-medium, 500);
  margin-left: var(--ina-spacing-2, 0.5rem);
}
.ina-password-input__character-count--warning {
  color: var(--ina-warning-500);
}
.ina-password-input__character-count--error {
  color: var(--ina-negative-500);
}
/* Size variants */
.ina-password-input--size-sm .ina-password-input__wrapper {
  padding: var(--ina-spacing-1-5) var(--ina-spacing-2);
  font-size: var(--ina-font-xs);
}
.ina-password-input--size-sm .ina-password-input__input {
  font-size: var(--ina-font-xs);
}
.ina-password-input--size-sm .ina-password-input__label {
  font-size: var(--ina-font-xs);
}
.ina-password-input--size-sm .ina-password-input__clear-icon {
  width: 14px;
  height: 14px;
}
.ina-password-input--size-sm .ina-password-input__visibility-icon {
  width: 18px;
  height: 18px;
}
.ina-password-input--size-lg .ina-password-input__wrapper {
  padding: var(--ina-spacing-2-5) var(--ina-spacing-4);
  font-size: var(--ina-font-base);
}
.ina-password-input--size-lg .ina-password-input__input {
  font-size: var(--ina-font-base);
}
.ina-password-input--size-lg .ina-password-input__label {
  font-size: var(--ina-font-base);
}
.ina-password-input--size-lg .ina-password-input__clear-icon {
  width: 18px;
  height: 18px;
}
.ina-password-input--size-lg .ina-password-input__visibility-icon {
  width: 22px;
  height: 22px;
}
/* Variant styles */
.ina-password-input--variant-outlined .ina-password-input__wrapper {
  border-width: 2px;
}
.ina-password-input--variant-filled .ina-password-input__wrapper {
  background-color: var(--ina-neutral-100);
  border-color: var(--ina-neutral-200);
}
.ina-password-input--variant-filled .ina-password-input__wrapper:focus-within {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-primary-500);
}
/* Disabled state */
.ina-password-input__wrapper--disabled {
  background-color: var(--ina-background-tertiary, #f2f2f2);
  border-color: var(--ina-stroke-primary) !important;
  cursor: not-allowed;
}
.ina-password-input__wrapper--disabled
  > .ina-password-input__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-password-input__wrapper--disabled
  > .ina-password-input__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-password-input__wrapper--disabled .ina-password-input__input {
  cursor: not-allowed;
  opacity: 0.6;
}
/* Loading state */
.ina-password-input--loading .ina-password-input__wrapper {
  opacity: 0.6;
  cursor: not-allowed;
}
.ina-password-input--loading .ina-password-input__input {
  cursor: not-allowed;
}
.ina-password-input--loading .ina-password-input__action-button {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Focus styles - Sesuai design Figma */
.ina-password-input__wrapper:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-content-primary, #1f1f1f);
}
/* Hover styles - Sesuai design Figma */
.ina-password-input__wrapper:hover {
  background-color: var(--ina-neutral-50, #f8f8f7);
}
/* Strength indicator */
.ina-password-input__strength-indicator {
  margin-top: var(--ina-spacing-1);
  height: 4px;
  border-radius: var(--ina-radius-full);
  overflow: hidden;
  background-color: var(--ina-neutral-200);
}
.ina-password-input__strength-bar {
  height: 100%;
  transition:
    width var(--ina-transition-duration-300) ease-out,
    background-color var(--ina-transition-base);
}
.ina-password-input__strength-bar--weak {
  background-color: var(--ina-negative-500);
}
.ina-password-input__strength-bar--fair {
  background-color: var(--ina-warning-500);
}
.ina-password-input__strength-bar--good {
  background-color: var(--ina-positive-600);
}
.ina-password-input__strength-bar--strong {
  background-color: var(--ina-primary-500);
}
/* Responsive adjustments */
@media (max-width: 639px) {
  .ina-password-input__wrapper {
    padding: var(--ina-spacing-3);
  }

  .ina-password-input__label,
  .ina-password-input__input,
  .ina-password-input__status-area,
  .ina-password-input__character-count {
    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
  }

  .ina-password-input__action-button {
    padding: var(--ina-spacing-2);
  }
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-password-input__label {
    color: var(--ina-content-dark-primary);
  }

  .ina-password-input__wrapper {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-password-input__wrapper--neutral {
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-password-input__wrapper--neutral:focus-within {
    border-color: var(--ina-primary-400);
  }

  .ina-password-input__input {
    color: var(--ina-content-dark-primary);
  }

  .ina-password-input__input::placeholder {
    color: var(--ina-content-dark-placeholder);
  }

  .ina-password-input__prefix-icon {
    color: var(--ina-content-secondary);
  }

  .ina-password-input__action-button {
    color: var(--ina-content-secondary);
  }

  .ina-password-input__action-button:hover:not(:disabled) {
    color: var(--ina-content-dark-primary);
  }

  .ina-password-input__status-message {
    color: var(--ina-content-secondary);
  }

  .ina-password-input__character-count {
    color: var(--ina-content-secondary);
  }

  .ina-password-input--variant-filled .ina-password-input__wrapper {
    background-color: var(--ina-neutral-900);
    border-color: var(--ina-neutral-700);
  }

  .ina-password-input__wrapper--disabled {
    background-color: var(--ina-neutral-900);
  }
} */
/* Accessibility improvements */
.ina-password-input__action-button:focus {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
/* Focus management for screen readers */
.ina-password-input__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;
}
.ina-password-input__toggle-button,
.ina-password-input__clear-button {
  /* Override user agent stylesheet untuk button */
  border: none;
  background: transparent;
  padding: 2px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  outline: none;
}
.ina-password-input__toggle-button:hover,
.ina-password-input__clear-button:hover {
  color: var(--ina-content-primary);
}
.ina-password-input__toggle-button:focus-visible,
.ina-password-input__clear-button:focus-visible {
  border: 2px solid var(--ina-stroke-secondary, #141414);
  background-color: var(--ina-background-secondary, #f8f8f7);
  color: var(--ina-content-primary);
  border-radius: var(--ina-radius-sm);
  outline: none;
}
/**
 * PhoneInput Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-phone-input {
  /* Base container */
  display: flex;
  flex-direction: column;
}
/* Label */
.ina-phone-input__label {
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(--ina-content-primary, #1f1f1f);
  margin-bottom: var(--ina-spacing-2, 0.5rem);
}
.ina-phone-input__required {
  color: var(--ina-negative-500, #f02d2d);
  display: inline;
  margin-left: var(--ina-spacing-1, 0.25rem);
}
/* Input wrapper */
.ina-phone-input__wrapper {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2, 0.5rem);
  border-radius: var(--ina-radius-lg, 0.5rem);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  background-color: var(--ina-background-primary, #ffffff);
  transition: all var(--ina-transition-base, 200ms ease-in-out);
  position: relative;
}
/* Size variants - match TextField */
.ina-phone-input__wrapper--size-sm {
  height: 40px;
}
.ina-phone-input__wrapper--size-md {
  height: 44px;
}
.ina-phone-input__wrapper--size-lg {
  height: 48px;
}
.ina-phone-input__country-flag-img {
  width: 26px;
  height: 20px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  box-shadow:
    0 1px 2px 0 rgba(31, 31, 31, 0.1),
    inset 0 0 0 2px var(--ina-neutral-25, #ffffff) !important;
}
/* Responsive adjustments */
@media (max-width: 767px) {
  .ina-phone-input__wrapper--size-sm {
    height: 36px;
  }
  .ina-phone-input__wrapper--size-md {
    height: 40px;
  }
  .ina-phone-input__wrapper--size-lg {
    height: 44px;
  }
}
@media (max-width: 639px) {
  .ina-phone-input__country-flag-img {
    width: 20px;
    height: 15px;
  }
  .ina-phone-input__wrapper {
    padding: var(--ina-spacing-2) var(--ina-spacing-3);
  }

  .ina-phone-input__wrapper--size-sm {
    height: 32px;
  }
  .ina-phone-input__wrapper--size-md {
    height: 36px;
  }
  .ina-phone-input__wrapper--size-lg {
    height: 40px;
  }

  .ina-phone-input__wrapper .ina-phone-input__country-search-input::-moz-placeholder {
    font-size: var(
      --ina-font-xs
    ) !important; /* Mengikuti SelectDropdown reference */
  }

  .ina-phone-input__wrapper input.ina-phone-input__input,
  .ina-phone-input__wrapper .ina-phone-input__country-search-input,
  .ina-phone-input__wrapper .ina-phone-input__country-search-input::placeholder,
  .ina-phone-input__label,
  .ina-phone-input__country-button,
  .ina-phone-input__country-code,
  .ina-phone-input__country-dial-code,
  .ina-phone-input__country-name {
    font-size: var(
      --ina-font-xs
    ) !important; /* Mengikuti SelectDropdown reference */
  }
  .ina-phone-input__country-flag {
    font-size: var(
      --ina-font-base
    ) !important; /* Mengikuti SelectDropdown reference */
  }

  /* Dropdown Responsive Fix */
  .ina-phone-input__country-selector {
    position: static;
  }

  .ina-phone-input__country-selector .ina-phone-input__country-dropdown {
    width: 100% !important;
  }
}
/* Country selector */
.ina-phone-input__country-selector {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 100%;
  margin-right: var(--ina-spacing-2);
  /* position: relative; Removed to allow dropdown to be relative to wrapper */
}
.ina-phone-input__country-button {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--ina-content-primary, #1f1f1f);
  font-size: var(--ina-font-sm, 0.875rem);
  height: 100%;
}
.ina-phone-input__country-code {
  font-weight: var(--ina-font-medium, 500);
  white-space: nowrap;
}
.ina-phone-input__country-chevron {
  color: var(--ina-content-secondary, #525252);
  transition: transform var(--ina-transition-base, 200ms ease-in-out);
}
.ina-phone-input__country-chevron--open {
  transform: rotate(180deg);
}
/* Divider vertical after country selector */
.ina-phone-input__divider {
  width: 1px;
  height: 20px;
  background-color: var(--ina-stroke-primary, #e5e5e5);
  margin-right: var(--ina-spacing-2, 0.5rem);
  flex-shrink: 0;
}
/* Input field */
.ina-phone-input__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--ina-font-sm, 0.875rem);
  font-family: inherit;
  color: var(--ina-content-primary, #1f1f1f);
  min-width: 0;
  padding-right: var(--ina-spacing-6, 1.5rem);
}
.ina-phone-input__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-phone-input__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
/* Clear button */
.ina-phone-input__clear-button {
  position: absolute;
  right: var(--ina-spacing-3, 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ina-content-tertiary, #a3a3a3);
  cursor: pointer;
  padding: 0;
  transition: all var(--ina-transition-base, 200ms ease-in-out);
}
.ina-phone-input__clear-button:hover:not(:disabled) {
  background-color: var(--ina-neutral-100, #f0f0ef);
  color: var(--ina-content-secondary, #525252);
}
.ina-phone-input__clear-button:active:not(:disabled) {
  background-color: var(--ina-neutral-200, #e5e5e4);
}
.ina-phone-input__clear-button:focus-visible {
  border: 2px solid var(--ina-stroke-secondary, #141414);
  background-color: var(--ina-background-secondary, #f8f8f7);
  color: var(--ina-content-primary);
  border-radius: var(--ina-radius-sm);
}
/* Helper text / Status message */
.ina-phone-input .ina-phone-input__helper-text {
  font-size: var(--ina-font-xs, 0.75rem);
  padding-top: var(--ina-spacing-1, 0.25rem);
  color: var(--ina-content-secondary, #525252);
}
.ina-phone-input__helper-text--error {
  color: var(--ina-negative-500);
}
.ina-phone-input__helper-text--warning {
  color: var(--ina-warning-500);
}
/* Status variants */
/* Status variants */
.ina-phone-input__wrapper--status-neutral {
  border-color: var(--ina-stroke-primary);
}
.ina-phone-input__wrapper--status-neutral:focus-within {
  border-color: var(--ina-content-primary);
}
.ina-phone-input__wrapper--status-error {
  border-color: var(--ina-negative-500);
}
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-error:focus-within {
  border-color: var(--ina-negative-500);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-negative-50) !important;
}
.ina-phone-input__wrapper--status-warning {
  border-color: var(--ina-warning-500);
}
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-warning:focus-within {
  border-color: var(--ina-warning-500);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-warning-50) !important;
}
.ina-phone-input__wrapper--status-success {
  border-color: var(--ina-positive-600);
}
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-success:focus-within {
  border-color: var(--ina-positive-600);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-positive-50) !important;
}
/* Focus styles */
.ina-phone-input__wrapper:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary);
  border-color: var(--ina-content-primary);
}
/* Hover states */
.ina-phone-input__wrapper:hover:not(.ina-phone-input__wrapper--disabled) {
  background-color: var(--ina-neutral-50, #f8f8f7);
}
/* Disabled state */
.ina-phone-input__wrapper--disabled {
  background-color: var(--ina-background-tertiary, #f2f2f2);
  border-color: var(--ina-stroke-primary) !important;
  cursor: not-allowed;
  opacity: 1;
}
.ina-phone-input__wrapper--disabled .ina-phone-input__input {
  cursor: not-allowed;
  color: var(
    --ina-content-tertiary,
    #a3a3a3
  ); /* Use content-tertiary for text color to act as disabled */
}
.ina-phone-input__wrapper--disabled .ina-phone-input__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-phone-input__wrapper--disabled .ina-phone-input__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-phone-input__wrapper--disabled .ina-phone-input__country-button {
  cursor: not-allowed;
  color: var(--ina-content-tertiary);
}
/* Country Dropdown */
.ina-phone-input
  .ina-phone-input__country-selector
  .ina-phone-input__country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--ina-spacing-2, 0.5rem) !important;
  background: var(--ina-background-primary, #ffffff);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-lg, 0.5rem);
  box-shadow: var(
    --ina-shadow-lg,
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1)
  );
  z-index: 100;
  width: 100%;
  max-height: 348px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--ina-spacing-2);
}
.ina-phone-input__country-search {
  padding: var(--ina-spacing-1, 0.25rem) 0 var(--ina-spacing-2, 0.5rem) 0;
}
.ina-phone-input__country-search-input {
  width: 100%;
  padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-md, 0.375rem);
  font-size: var(--ina-font-xs, 0.75rem);
}
.ina-phone-input__country-search-input:focus {
  outline: none;
  border-color: var(--ina-content-primary, #1f1f1f);
}
.ina-phone-input__country-list {
  overflow-y: auto;
  flex: 1;
}
.ina-phone-input__country-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--ina-transition-base, 200ms ease-in-out);
  gap: var(--ina-spacing-2, 0.5rem);
}
.ina-phone-input__country-option:hover {
  background-color: var(--ina-background-secondary, #f5f5f5);
  border-radius: var(--ina-radius-base, 4px);
}
.ina-phone-input__country-option--selected {
  background-color: var(--ina-background-secondary, #f5f5f5);
  border-radius: var(--ina-radius-base, 4px);
}
.ina-phone-input__country-name {
  flex: 1;
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: 400;
  color: var(--ina-content-primary, #1f1f1f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ina-phone-input__country-dial-code {
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-content-secondary, #525252);
}
/**
 * ProgressBar Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-progress-bar {
  /* Base container styling */
  position: relative;
  width: 100%;
  background-color: var(--ina-neutral-200);
  border-radius: var(--ina-radius-full);
  overflow: hidden;
  transition: opacity var(--ina-transition-base);
}
.ina-progress-bar--hidden {
  opacity: 0;
  visibility: hidden;
}
/* Height variants */
.ina-progress-bar--height-sm {
  height: 2px;
}
.ina-progress-bar--height-md {
  height: 4px;
}
.ina-progress-bar--height-lg {
  height: 6px;
}
/* Progress fill */
.ina-progress-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width var(--ina-transition-duration-1000) ease-out;
  background-color: var(--ina-primary-500);
}
/* Variant colors */
.ina-progress-bar__fill--primary {
  background-color: var(--ina-primary-500);
}
.ina-progress-bar__fill--secondary {
  background-color: var(--ina-neutral-500);
}
.ina-progress-bar__fill--success {
  background-color: var(--ina-positive-500);
}
.ina-progress-bar__fill--warning {
  background-color: var(--ina-warning-500);
}
.ina-progress-bar__fill--error {
  background-color: var(--ina-negative-500);
}
/* Shimmer effect */
.ina-progress-bar__shimmer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite linear;
  opacity: 0;
  transition: opacity var(--ina-transition-base);
}
.ina-progress-bar--shimmer .ina-progress-bar__shimmer {
  opacity: 1;
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Animated indicator */
.ina-progress-bar__indicator {
  position: absolute;
  top: 0;
  height: 100%;
  width: 32px;
  border-radius: inherit;
  opacity: 0.8;
  transform: translateX(-100%);
  transition: left var(--ina-transition-duration-1000) ease-out;
  animation: pulse 1.5s infinite;
}
.ina-progress-bar__indicator--primary {
  background-color: var(--ina-primary-500);
}
.ina-progress-bar__indicator--secondary {
  background-color: var(--ina-neutral-500);
}
.ina-progress-bar__indicator--success {
  background-color: var(--ina-positive-500);
}
.ina-progress-bar__indicator--warning {
  background-color: var(--ina-warning-500);
}
.ina-progress-bar__indicator--error {
  background-color: var(--ina-negative-500);
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.6;
  }
}
/* Striped variant */
.ina-progress-bar__fill--striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: moveStripes 1s linear infinite;
}
@keyframes moveStripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}
/* Size variants with more height options */
.ina-progress-bar--height-xs {
  height: 1px;
}
.ina-progress-bar--height-xl {
  height: 8px;
}
.ina-progress-bar--height-2xl {
  height: 12px;
}
/* Custom duration variants */
.ina-progress-bar--duration-fast .ina-progress-bar__fill {
  transition-duration: var(--ina-transition-duration-200);
}
.ina-progress-bar--duration-medium .ina-progress-bar__fill {
  transition-duration: var(--ina-transition-duration-500);
}
.ina-progress-bar--duration-slow .ina-progress-bar__fill {
  transition-duration: var(--ina-transition-duration-2000);
}
/* Loading state animation */
.ina-progress-bar--loading {
  animation: indeterminate 2s infinite linear;
}
.ina-progress-bar--loading .ina-progress-bar__fill {
  position: relative;
  width: 30%;
  background: linear-gradient(
    90deg,
    var(--ina-primary-500) 0%,
    var(--ina-primary-400) 50%,
    var(--ina-primary-500) 100%
  );
  background-size: 200% 100%;
  animation: loading-shift 1s infinite linear;
}
@keyframes indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
@keyframes loading-shift {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* Gradient variants */
.ina-progress-bar__fill--gradient-primary {
  background: linear-gradient(
    90deg,
    var(--ina-primary-400),
    var(--ina-primary-500),
    var(--ina-primary-600)
  );
}
.ina-progress-bar__fill--gradient-success {
  background: linear-gradient(
    90deg,
    var(--ina-positive-400),
    var(--ina-positive-500),
    var(--ina-positive-600)
  );
}
.ina-progress-bar__fill--gradient-warning {
  background: linear-gradient(
    90deg,
    var(--ina-warning-400),
    var(--ina-warning-500),
    var(--ina-warning-600)
  );
}
.ina-progress-bar__fill--gradient-error {
  background: linear-gradient(
    90deg,
    var(--ina-negative-400),
    var(--ina-negative-500),
    var(--ina-negative-600)
  );
}
/* Status-based styling */
.ina-progress-bar__fill--complete {
  background-color: var(--ina-positive-500);
}
.ina-progress-bar__fill--in-progress {
  animation: breathing 2s infinite ease-in-out;
}
@keyframes breathing {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
/* Circular variant */
.ina-progress-bar--circular {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ina-primary-500) 0deg,
    var(--ina-neutral-200) 0deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ina-progress-bar--circular .ina-progress-bar__fill {
  display: none;
}
.ina-progress-bar__circular-content {
  position: absolute;
  inset: 20%;
  background-color: var(--ina-background-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary);
}
/* Progress label */
.ina-progress-bar__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Skeleton variant */
.ina-progress-bar--skeleton {
  background: linear-gradient(
    90deg,
    var(--ina-neutral-200) 25%,
    var(--ina-neutral-300) 50%,
    var(--ina-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite ease-out;
}
.ina-progress-bar--skeleton .ina-progress-bar__fill {
  display: none;
}
@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-progress-bar {
    background-color: var(--ina-neutral-700);
  }

  .ina-progress-bar__fill--primary {
    background-color: var(--ina-primary-400);
  }

  .ina-progress-bar__fill--secondary {
    background-color: var(--ina-neutral-400);
  }

  .ina-progress-bar__fill--success {
    background-color: var(--ina-positive-400);
  }

  .ina-progress-bar__fill--warning {
    background-color: var(--ina-warning-400);
  }

  .ina-progress-bar__fill--error {
    background-color: var(--ina-negative-400);
  }

  .ina-progress-bar__shimmer {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
  }

  .ina-progress-bar__circular-content {
    background-color: var(--ina-background-dark-primary);
    color: var(--ina-content-dark-primary);
  }

  .ina-progress-bar__label {
    color: var(--ina-content-dark-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  .ina-progress-bar--skeleton {
    background: linear-gradient(
      90deg,
      var(--ina-neutral-700) 25%,
      var(--ina-neutral-600) 50%,
      var(--ina-neutral-700) 75%
    );
  }
} */
/* Responsive adjustments */
@media (max-width: 640px) {
  .ina-progress-bar--circular {
    width: 80px;
    height: 80px;
  }

  .ina-progress-bar__circular-content {
    font-size: var(--ina-font-xs);
  }
}
/* Accessibility improvements */
.ina-progress-bar[aria-hidden='true'] {
  visibility: hidden;
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-progress-bar {
    border: 1px solid var(--ina-content-primary);
  }

  .ina-progress-bar__fill {
    border: 1px solid var(--ina-background-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-progress-bar__fill,
  .ina-progress-bar__indicator,
  .ina-progress-bar__shimmer,
  .ina-progress-bar--skeleton,
  .ina-progress-bar--loading,
  .ina-progress-bar--loading .ina-progress-bar__fill {
    animation: none;
    transition: none;
  }
}
/**
 * RadioInput Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-radio-input {
  /* Base container styling */
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-2, 0.5rem);
}
/* Label styling */
.ina-radio-input__main-label {
  display: block;
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-content-color-181717, #1f1f1f);
  font-weight: var(--ina-font-medium, 500);
}
/* Radio group container */
.ina-radio-input__group {
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-2, 0.5rem);
}
/* Individual radio option */
.ina-radio-input__option {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2, 0.5rem);
  cursor: pointer;
  transition: background-color var(--ina-transition-base, 200ms ease-in-out);
  padding: var(--ina-spacing-2, 0.5rem);
  border-radius: var(--ina-radius-md, 0.375rem);
}
.ina-radio-input__option:hover {
  background-color: var(--ina-neutral-50, #f8f8f7);
}
.ina-radio-input__option--disabled {
  cursor: not-allowed;
}
.ina-radio-input__option--disabled:hover {
  background-color: transparent;
}
/* Radio input field - Default styling */
.ina-radio-input__field {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ina-stroke-tertiary, #141414);
  border-radius: 50%;
  background-color: var(--ina-background-primary, #ffffff);
  cursor: pointer;
  position: relative;
  transition: all var(--ina-transition-base, 200ms ease-in-out);
  flex-shrink: 0;
}
/* Hover state - Add drop shadow */
.ina-radio-input__field:hover:not(:disabled) {
  box-shadow: 0 0 3px #737373;
}
/* Focus state - Add box shadow */
.ina-radio-input__field:focus-within:not(:disabled),
.ina-radio-input__field:focus-visible:not(:disabled),
.ina-radio-input__field:focus:not(:disabled) {
  outline: none;
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 2px var(--ina-content-primary, #1f1f1f) !important;
}
/* Active state - Add drop shadow */
.ina-radio-input__field:active:not(:disabled) {
  box-shadow: 0 0 3px #737373;
}
/* Selected state */
.ina-radio-input__field:checked {
  border-color: var(--ina-stroke-tertiary, #141414);
  background-color: var(--ina-background-primary, #ffffff);
}
.ina-radio-input__field:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--ina-stroke-tertiary, #141414);
}
/* Checked + Focus - Keep focus ring */
.ina-radio-input__field:checked:focus-visible:not(:disabled) {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 2px var(--ina-content-primary, #1f1f1f);
}
/* Disabled states */
.ina-radio-input__field:disabled {
  border-color: var(--ina-stroke-primary, #e5e5e5);
  background-color: var(--ina-background-secondary, #f8f8f7);
  cursor: not-allowed;
  opacity: 1;
  filter: none;
}
/* Disabled + Checked state - Higher specificity */
.ina-radio-input__field:disabled:checked {
  border-color: var(--ina-stroke-primary, #e5e5e5) !important;
  background-color: var(
    --ina-background-secondary,
    var(--ina-neutral-50)
  ) !important;
  filter: none;
}
.ina-radio-input__field:disabled:checked::after {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--ina-stroke-primary, #e5e5e5);
}
/* Radio option label */
.ina-radio-input__option-label {
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-content-primary, #1f1f1f);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex: 1;
  line-height: 1.5;
}
.ina-radio-input__option-label--disabled {
  cursor: not-allowed;
}
/* Size variants */
/* Size variants */
.ina-radio-input--size-sm .ina-radio-input__main-label,
.ina-radio-input--size-sm .ina-radio-input__option-label {
  font-size: var(--ina-font-xs, 0.75rem);
}
.ina-radio-input--size-sm .ina-radio-input__field {
  width: 16px;
  height: 16px;
}
.ina-radio-input--size-sm .ina-radio-input__field:checked::after {
  width: 8px;
  height: 8px;
}
.ina-radio-input--size-lg .ina-radio-input__main-label,
.ina-radio-input--size-lg .ina-radio-input__option-label {
  font-size: var(--ina-font-base, 1rem);
}
.ina-radio-input--size-lg .ina-radio-input__field {
  width: 24px;
  height: 24px;
}
.ina-radio-input--size-lg .ina-radio-input__field:checked::after {
  width: 14px;
  height: 14px;
}
/* Orientation variants */
.ina-radio-input--orientation-horizontal .ina-radio-input__group {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ina-spacing-4, 1rem);
  align-items: center;
}
/* Status variants */
.ina-radio-input__main-label--required::after {
  content: '*';
  color: var(--ina-danger-5, #f02d2d);
  margin-left: var(--ina-spacing-1, 0.25rem);
}
/* Focus indicators */
/* Focus indicators */
.ina-radio-input__field:focus-visible {
  outline: none;
  outline-offset: 0;
}
/* Error state */
.ina-radio-input--error .ina-radio-input__main-label {
  color: var(--ina-negative-500, #f02d2d);
}
.ina-radio-input--error .ina-radio-input__field {
  border-color: var(--ina-negative-500, #f02d2d);
}
.ina-radio-input--error .ina-radio-input__field:focus-visible {
  outline-color: var(--ina-negative-500, #f02d2d);
}
/* Loading state */
.ina-radio-input--loading .ina-radio-input__option {
  cursor: not-allowed;
}
.ina-radio-input--loading .ina-radio-input__field {
  cursor: not-allowed;
}
/* Help text */
.ina-radio-input__help-text {
  font-size: var(--ina-font-xs, 0.75rem);
  color: var(--ina-content-secondary, #525252);
  margin-top: var(--ina-spacing-1, 0.25rem);
}
.ina-radio-input__help-text--error {
  color: var(--ina-negative-500, #f02d2d);
}
/* Responsive adjustments */
@media (max-width: 640px) {
  /* Scale down LG to MD size equivalent */
  .ina-radio-input--size-lg .ina-radio-input__field {
    width: 20px;
    height: 20px;
  }

  .ina-radio-input--size-lg .ina-radio-input__field:checked::after {
    width: 11px;
    height: 11px;
  }

  .ina-radio-input--size-lg .ina-radio-input__main-label,
  .ina-radio-input--size-lg .ina-radio-input__option-label {
    font-size: var(--ina-font-sm);
  }

  /* Scale down MD (and default/generic) to SM size equivalent */
  .ina-radio-input--size-md .ina-radio-input__field,
  .ina-radio-input:not([class*='ina-radio-input--size-lg'])
    .ina-radio-input__field {
    width: 16px;
    height: 16px;
  }

  .ina-radio-input--size-md .ina-radio-input__field:checked::after {
    width: 8px;
    height: 8px;
  }

  .ina-radio-input--size-md .ina-radio-input__main-label,
  .ina-radio-input--size-md .ina-radio-input__option-label,
  .ina-radio-input__main-label,
  .ina-radio-input__option-label {
    font-size: var(--ina-font-xs);
  }

  .ina-radio-input__help-text {
    font-size: var(--ina-font-xs);
  }

  .ina-radio-input--orientation-horizontal .ina-radio-input__group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--ina-spacing-2);
  }
}
/* Dark mode support - handled by CSS variables in css-variables.css */
/* Accessibility improvements */
.ina-radio-input__field + .ina-radio-input__option-label {
  /* Improve tap target size for touch devices */
  padding: var(--ina-spacing-1) var(--ina-spacing-2);
  margin: calc(var(--ina-spacing-1) * -1) calc(var(--ina-spacing-2) * -1);
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-radio-input__field {
    border-width: 3px;
  }

  .ina-radio-input__field:checked {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-radio-input__option,
  .ina-radio-input__field {
    transition: none;
  }
}
/**
 * SelectDropdown Component Styles  
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-select-dropdown {
  /* Base container styling */
  position: relative;
  display: inline-block;
  font-size: var(--ina-font-xs, 0.75rem);
}
.ina-select-dropdown:focus-visible {
  outline: none;
}
@media (min-width: 768px) {
  .ina-select-dropdown {
    font-size: var(--ina-font-sm, 0.875rem);
  }
}
/* Label Styles */
.ina-select-dropdown__label {
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(--ina-content-primary, #1f1f1f);
  margin-bottom: var(--ina-spacing-2, 0.5rem);
  display: block;
}
.ina-select-dropdown__required {
  color: var(--ina-negative-500, #f02d2d);
  margin-left: var(--ina-spacing-1, 0.25rem);
}
/* Trigger button */
.ina-select-dropdown__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-lg, 0.5rem);
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-4, 1rem);
  background-color: var(--ina-background-primary, #ffffff);
  color: var(--ina-content-primary, #1f1f1f);
  cursor: pointer;
  font-size: inherit;
  outline: none;
  transition: all var(--ina-transition-base, 200ms ease-in-out);
  position: relative;
}
/* NEW: Trigger Input for Search */
.ina-select-dropdown__trigger-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
  outline: none;
  min-width: 0; /* Allow shrinking */
  cursor: text;
}
.ina-select-dropdown__trigger-input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-select-dropdown__trigger-input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-select-dropdown__trigger-input--selected::-moz-placeholder {
  color: var(--ina-content-primary, #1f1f1f) !important;
}
.ina-select-dropdown__trigger-input--selected::placeholder {
  color: var(--ina-content-primary, #1f1f1f) !important;
}
.ina-select-dropdown__trigger-input:disabled {
  cursor: not-allowed;
}
/* Size variants */
.ina-select-dropdown__trigger--size-sm {
  /* Desktop >= 768px */
  height: 40px;
}
.ina-select-dropdown__trigger--size-md {
  /* Desktop >= 768px */
  height: 44px;
}
.ina-select-dropdown__trigger--size-lg {
  /* Desktop >= 768px */
  height: 48px;
}
/* Responsive adjustments */
@media (max-width: 767px) {
  .ina-select-dropdown__trigger--size-sm {
    height: 36px;
  }

  .ina-select-dropdown__trigger--size-md {
    height: 40px;
  }

  .ina-select-dropdown__trigger--size-lg {
    height: 44px;
  }
}
.ina-select-dropdown__trigger:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
/* Focus state for trigger when it acts as container */
.ina-select-dropdown__trigger:focus-within {
  border-color: var(--ina-stroke-tertiary, #141414);
  background: var(--ina-background-primary, #ffffff);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
}
/* Status variants */
.ina-select-dropdown__trigger--status-neutral {
  border-color: var(--ina-stroke-primary, #e5e5e5);
}
.ina-select-dropdown__trigger--status-neutral:focus-within {
  border-color: var(--ina-stroke-tertiary, #141414);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
}
.ina-select-dropdown__trigger--status-error {
  border-color: var(--ina-negative-500, #f02d2d);
}
.ina-select-dropdown__trigger--status-error:focus-within {
  border-color: var(--ina-negative-600, #d50b0b);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-negative-50, #fffafa);
}
.ina-select-dropdown__trigger--status-warning {
  border-color: var(--ina-warning-500, #eebb04);
}
.ina-select-dropdown__trigger--status-warning:focus-within {
  border-color: var(--ina-warning-600, #855f00);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-warning-50, #fffefa);
}
.ina-select-dropdown__trigger--status-success {
  border-color: var(--ina-positive-500, #3cc14e);
}
.ina-select-dropdown__trigger--status-success:focus-within {
  border-color: var(--ina-positive-600, #288034);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-positive-50, #fafffa);
}
.ina-select-dropdown__trigger--disabled {
  background-color: transparent;
  color: var(--ina-neutral-400);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-select-dropdown__trigger--disabled:hover {
  background-color: transparent;
}
/* Trigger content */
.ina-select-dropdown__trigger-prefix {
  flex-shrink: 0;
  margin-right: var(--ina-spacing-2);
  display: flex;
  align-items: center;
}
.ina-select-dropdown__trigger-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ina-select-dropdown__trigger-text--placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-select-dropdown__trigger-text--selected {
  color: var(--ina-content-primary, #1f1f1f);
}
.ina-select-dropdown__trigger-text--disabled {
  color: var(--ina-neutral-400, #a3a3a3);
}
/* Trigger icon (chevron) */
.ina-select-dropdown__trigger-icon {
  flex-shrink: 0;
  margin-left: var(--ina-spacing-2, 0.5rem);
  color: var(--ina-content-secondary, #525252);
  transition: transform var(--ina-transition-base, 200ms ease-in-out);
}
.ina-select-dropdown__trigger-icon--disabled {
  color: var(--ina-neutral-400, #a3a3a3);
}
/* Panel container */
.ina-select-dropdown__panel {
  position: absolute;
  z-index: 10004; /* Higher than YearPicker panel */
  top: 100%;
  left: 0;
  /* width: 100% and min-width: 100% removed because width is set dynamically via JS inline style */
  margin-top: var(--ina-spacing-2, 0.5rem);
  background-color: var(
    --ina-background-primary,
    #ffffff
  ) !important; /* Ensure solid background */
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-lg, 0.5rem);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dropdownFadeIn var(--ina-transition-duration-200) ease-out;
  /* Ensure panel content is solid */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Search input section */
.ina-select-dropdown__search {
  padding: var(--ina-spacing-2, 0.5rem) 12px;
  border-bottom: 1px solid var(--ina-stroke-primary, #e5e5e5);
}
.ina-select-dropdown__search-input {
  width: 100%;
  border: none;
  font-size: var(--ina-font-sm, 0.875rem);
  background-color: transparent;
  color: var(--ina-content-primary, #1f1f1f);
  outline: none;
  transition: border-color var(--ina-transition-base, 200ms ease-in-out);
}
.ina-select-dropdown__search-input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
  font-size: var(--ina-font-xs, 0.75rem);
}
.ina-select-dropdown__search-input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
  font-size: var(--ina-font-xs, 0.75rem);
}
.ina-select-dropdown__search-input:focus {
  border-bottom-color: var(--ina-stroke-primary, #e5e5e5);
}
.ina-select-dropdown__search-input--disabled {
  background-color: transparent;
  color: var(--ina-neutral-400);
  cursor: not-allowed;
  opacity: 0.6;
}
/* Selected preview section */
.ina-select-dropdown__preview {
  padding: var(--ina-spacing-3, 0.75rem);
  border-bottom: 1px solid var(--ina-stroke-primary, #e5e5e5);
  background-color: var(--ina-white, #ffffff);
}
.ina-select-dropdown__preview-label {
  font-size: var(--ina-font-xs, 0.75rem);
  color: var(--ina-content-secondary, #525252);
  margin-bottom: var(--ina-spacing-1, 0.25rem);
}
.ina-select-dropdown__preview-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ina-spacing-1, 0.25rem);
}
.ina-select-dropdown__preview-item {
  display: inline-flex;
  align-items: center;
  padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
  font-size: var(--ina-font-xs, 0.75rem);
  border-radius: var(--ina-radius-md, 0.375rem);
  gap: var(--ina-spacing-2, 0.5rem);
}
.ina-select-dropdown__preview-item--multiple,
.ina-select-dropdown__preview-item--single {
  background-color: var(--ina-background-secondary, #f8f8f7);
  color: var(--ina-content-primary, #1f1f1f);
}
.ina-select-dropdown__preview-item-text {
  margin-right: var(--ina-spacing-1, 0.25rem);
}
.ina-select-dropdown__preview-item-count {
  font-weight: var(--ina-font-medium, 500);
}
.ina-select-dropdown__preview-more {
  display: inline-flex;
  align-items: center;
  padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);

  font-size: var(--ina-font-xs, 0.75rem);
  background-color: var(--ina-neutral-100, #f5f5f5);
  color: var(--ina-neutral-600, #525252);
  border-radius: var(--ina-radius-md, 0.375rem);
}
/* Remove button */
.ina-select-dropdown__preview-remove {
  flex-shrink: 0;
  padding: var(--ina-spacing-0-5);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--ina-radius-full, 9999px);
  transition: background-color var(--ina-transition-base, 200ms ease-in-out);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.ina-select-dropdown__preview-remove:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.ina-select-dropdown__preview-remove:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-select-dropdown__preview-remove--multiple:hover,
.ina-select-dropdown__preview-remove--single:hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
}
/* Options container */
.ina-select-dropdown__options {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ina-neutral-400, #a3a3a3)
    var(--ina-neutral-100, #f5f5f5);
  padding: var(--ina-spacing-1, 0.25rem);
}
.ina-select-dropdown__options::-webkit-scrollbar {
  width: 6px;
}
.ina-select-dropdown__options::-webkit-scrollbar-track {
  background: var(--ina-neutral-100, #f5f5f5);
}
.ina-select-dropdown__options::-webkit-scrollbar-thumb {
  background-color: var(--ina-neutral-400, #a3a3a3);
  border-radius: var(--ina-radius-full, 9999px);
}
.ina-select-dropdown__options::-webkit-scrollbar-thumb:hover {
  background-color: var(--ina-neutral-500, #737373);
}
/* Individual option */
.ina-select-dropdown__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-3, 0.75rem);
  padding: 10px 12px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background-color var(--ina-transition-base, 200ms ease-in-out);
  border-radius: var(--ina-radius-base, 0.25rem);
  color: var(--ina-content-primary, #1f1f1f);
  min-height: 40px;
  font-size: var(--ina-font-xs, 0.75rem);
}
@media (min-width: 768px) {
  .ina-select-dropdown__option {
    font-size: 14px;
  }
}
.ina-select-dropdown__option:hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
}
.ina-select-dropdown__option:focus-visible,
.ina-select-dropdown__option--focused {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  outline: 2px solid var(--ina-content-tertiary, #a3a3a3);
  outline-offset: -2px;
}
/* Selected state untuk multiple mode */
.ina-select-dropdown__option--selected-multiple:not(:disabled),
.ina-select-dropdown__option--selected-single:not(:disabled) {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
.ina-select-dropdown__option--selected-multiple:not(:disabled):hover,
.ina-select-dropdown__option--selected-single:not(:disabled):hover,
.ina-select-dropdown__option--selected-multiple:not(:disabled):hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
}
.ina-select-dropdown__option--disabled {
  color: var(--ina-content-tertiary, #a3a3a3);
  cursor: not-allowed;
}
.ina-select-dropdown__option--disabled:hover {
  background-color: transparent;
}
/* Option indicators (checkboxes/radio) */
.ina-select-dropdown__option-indicator {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ina-select-dropdown__option-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--ina-stroke-secondary, #a3a3a3);
  border-radius: var(--ina-radius-base, 0.25rem);
  background-color: var(--ina-neutral-25, #ffffff);
  transition: all var(--ina-transition-base, 200ms ease-in-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ina-select-dropdown__option-checkbox--checked {
  background-color: var(--ina-content-primary, #1f1f1f);
  border-color: var(--ina-stroke-primary, #e5e5e5);
  color: var(--ina-white, #ffffff);
}
.ina-select-dropdown__option-radio {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--ina-content-primary, #1f1f1f);
  border-radius: 50%;
  background-color: transparent;
  transition: all var(--ina-transition-base, 200ms ease-in-out);
  position: relative;
}
.ina-select-dropdown__option-radio--checked {
  border-color: var(--ina-content-primary, #1f1f1f);
}
.ina-select-dropdown__option-radio-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: var(--ina-content-primary, #1f1f1f);
  border-radius: 50%;
}
/* Option content */
.ina-select-dropdown__option-content {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.ina-select-dropdown__option-label {
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--ina-line-height-normal, 1.5);
}
/* Option check indicator (right side) */
.ina-select-dropdown__option-check-indicator {
  flex-shrink: 0;
  color: var(--ina-content-primary, #1f1f1f);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ina-select-dropdown__option-check-icon {
  color: var(--ina-content-primary, #1f1f1f);
}
/* Empty state */
.ina-select-dropdown__empty {
  padding: var(--ina-spacing-3, 0.75rem);
  text-align: center;
  color: var(--ina-content-secondary, #525252);
  font-size: var(--ina-font-sm, 0.875rem);
  font-style: italic;
}
/* Load more button */
.ina-select-dropdown__load-more {
  padding: var(--ina-spacing-3, 0.75rem);
  border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
}
.ina-select-dropdown__load-more-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-content-primary, #1f1f1f);
  background-color: var(--ina-background-secondary, #f8f8f7);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-md, 0.375rem);
  cursor: pointer;
  transition:
    background-color var(--ina-transition-base, 200ms ease-in-out),
    border-color var(--ina-transition-base, 200ms ease-in-out),
    box-shadow var(--ina-transition-base, 200ms ease-in-out);
}
.ina-select-dropdown__load-more-button:hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
}
.ina-select-dropdown__load-more-button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.ina-select-dropdown__load-more-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ina-select-dropdown__load-more-button:disabled:hover {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  color: var(--ina-content-tertiary, #a3a3a3);
  border-color: var(--ina-content-tertiary, #a3a3a3);
}
/* Loading state */
.ina-select-dropdown__loading {
  padding: var(--ina-spacing-3, 0.75rem);
  border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ina-spacing-2, 0.5rem);
}
.ina-select-dropdown__loading-spinner {
  animation: spin 1s linear infinite;
  color: var(--ina-content-secondary, #525252);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.ina-select-dropdown__loading-text {
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-content-secondary, #525252);
}
/* Size variants - Font size and padding */
/* Small size */
.ina-select-dropdown--size-sm {
  font-size: 12px;
}
.ina-select-dropdown--size-sm .ina-select-dropdown__trigger {
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
  font-size: 12px;
}
.ina-select-dropdown--size-sm .ina-select-dropdown__trigger-text {
  font-size: 12px;
}
.ina-select-dropdown--size-sm .ina-select-dropdown__trigger-icon {
  width: 16px;
  height: 16px;
}
.ina-select-dropdown--size-sm .ina-select-dropdown__option {
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
  min-height: 36px;
  font-size: 12px;
}
.ina-select-dropdown--size-sm .ina-select-dropdown__option-label {
  font-size: 12px;
}
.ina-select-dropdown--size-sm .ina-select-dropdown__search-input {
  font-size: 12px;
}
/* Large size - keep existing font-size 14px */
.ina-select-dropdown--size-lg .ina-select-dropdown__trigger {
  padding: var(--ina-spacing-3) var(--ina-spacing-4);
}
.ina-select-dropdown--size-lg .ina-select-dropdown__option {
  padding: var(--ina-spacing-3) var(--ina-spacing-4);
  min-height: 52px;
}
/* Dark mode support - Updated to use new CSS variable system */
/* CSS sekarang menggunakan variabel yang sudah di-override di css-variables.css */
/* Responsive adjustments */
@media (max-width: 639px) {
  .ina-select-dropdown__option {
    min-height: 48px;
    padding: var(--ina-spacing-3, 0.75rem);
  }

  .ina-select-dropdown__preview-content {
    gap: var(--ina-spacing-2, 0.5rem);
  }

  .ina-select-dropdown__trigger--size-sm {
    height: 32px !important;
  }

  .ina-select-dropdown__trigger--size-md {
    height: 36px !important;
  }

  .ina-select-dropdown__trigger--size-lg {
    height: 40px !important;
  }
  .ina-select-dropdown__load-more-button {
    font-size: var(--ina-font-xs, 0.75rem);
  }

  .ina-select-dropdown__label,
  .ina-select-dropdown__trigger,
  .ina-select-dropdown__trigger-text {
    font-size: var(--ina-font-xs, 0.75rem) !important;
  }
}
/* Accessibility improvements */
.ina-select-dropdown__trigger:focus-visible {
  outline: 2px solid var(--ina-content-primary, #1f1f1f);
  outline-offset: 2px;
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-select-dropdown__trigger,
  .ina-select-dropdown__panel {
    border-width: 2px;
  }

  .ina-select-dropdown__option-checkbox,
  .ina-select-dropdown__option-radio {
    border-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-select-dropdown__trigger,
  .ina-select-dropdown__trigger-icon,
  .ina-select-dropdown__panel,
  .ina-select-dropdown__option,
  .ina-select-dropdown__load-more-button,
  .ina-select-dropdown__loading-spinner {
    animation: none;
    transition: none;
  }
}
/* Selection Title */
.ina-select-dropdown__selection-title {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ina-content-tertiary, #a3a3a3);
  line-height: 1.33; /* 16px / 12px */
  pointer-events: none;
}
/* =========================== */
/* SELECT OPTION COMPONENT     */
/* =========================== */
.ina-select-option {
  /* Base container styling */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-2);
}
/* Label styling */
.ina-select-option__label {
  display: flex;
  align-items: center;
  font-size: var(--ina-font-sm);
  color: var(--ina-primary-600);
  font-weight: var(--ina-font-medium);
}
.ina-select-option__label-required {
  margin-left: var(--ina-spacing-1);
  color: var(--ina-error-500);
  font-weight: var(--ina-font-bold);
}
/* Value display */
.ina-select-option__value {
  flex: 1;
  font-size: var(--ina-font-sm);
  color: var(--ina-primary-600);
  font-weight: var(--ina-font-medium);
}
.ina-select-option__value--placeholder {
  color: var(--ina-content-tertiary);
}
/* Bottom sheet container */
.ina-select-option__bottom-sheet {
  position: relative;
  margin-bottom: var(--ina-spacing-8);
}
/* Header section */
.ina-select-option__header {
  position: sticky;
  top: 0;
  background-color: var(--ina-background-primary);
  padding: var(--ina-spacing-4) var(--ina-spacing-4) var(--ina-spacing-3)
    var(--ina-spacing-4);
  border-bottom: 1px solid var(--ina-stroke-primary);
}
.ina-select-option__header-title {
  display: flex;
  align-items: center;
  font-size: var(--ina-font-base);
  font-weight: var(--ina-font-semibold);
  color: var(--ina-primary-600);
}
.ina-select-option__header-back {
  margin-right: var(--ina-spacing-2);
  cursor: pointer;
  color: var(--ina-primary-600);
}
.ina-select-option__header-back:hover {
  color: var(--ina-primary-700);
}
/* Search section */
.ina-select-option__search {
  padding: var(--ina-spacing-4);
}
/* Options grid */
.ina-select-option__options {
  display: grid;
  padding: var(--ina-spacing-4);
  gap: var(--ina-spacing-2);
}
/* Option item */
.ina-select-option__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ina-spacing-3);
  border-radius: var(--ina-radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 1px solid transparent;
}
.ina-select-option__option:hover {
  background-color: var(--ina-background-secondary);
}
.ina-select-option__option--selected {
  background-color: var(--ina-primary-50);
  border-color: var(--ina-primary-200);
}
.ina-select-option__option-label {
  font-size: var(--ina-font-sm);
  color: var(--ina-content-primary);
  font-weight: var(--ina-font-medium);
}
.ina-select-option__option-check {
  color: var(--ina-primary-600);
  font-size: var(--ina-font-lg);
}
/* Empty state */
.ina-select-option__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ina-spacing-4);
  padding: var(--ina-spacing-8);
  text-align: center;
}
.ina-select-option__empty-title {
  font-size: var(--ina-font-lg);
  font-weight: var(--ina-font-bold);
  color: var(--ina-content-secondary);
}
.ina-select-option__empty-description {
  font-size: var(--ina-font-sm);
  color: var(--ina-content-secondary);
  line-height: 1.5;
}
/* Responsive design */
@media (max-width: 640px) {
  .ina-select-option__label {
    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
  }

  .ina-select-option__value {
    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
  }

  .ina-select-option__header-title {
    font-size: var(--ina-font-sm); /* Turun dari base ke sm */
  }

  .ina-select-option__option-label {
    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
  }

  .ina-select-option__empty-title {
    font-size: var(--ina-font-base); /* Turun dari lg ke base */
  }

  .ina-select-option__empty-description {
    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
  }
}
@media (min-width: 640px) {
  .ina-select-option__options {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .ina-select-option__options {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .ina-select-option__options {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-select-option__header {
    background-color: var(--ina-background-primary);
    border-bottom-color: var(--ina-stroke-primary);
  }

  .ina-select-option__option:hover {
    background-color: var(--ina-background-secondary);
  }

  .ina-select-option__option--selected {
    background-color: var(--ina-primary-50);
    border-color: var(--ina-primary-200);
  }
} */
[data-theme='dark'] {
  .ina-select-option__header {
    background-color: var(--ina-background-primary);
    border-bottom-color: var(--ina-stroke-primary);
  }

  .ina-select-option__option:hover {
    background-color: var(--ina-background-secondary);
  }

  .ina-select-option__option--selected {
    background-color: var(--ina-primary-50);
    border-color: var(--ina-primary-200);
  }
}
/**
 * Single File Upload Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 * Sesuai dengan design Figma
 */
.ina-single-file-upload {
  width: 300px;
  height: 72px;
  position: relative;
}
.ina-single-file-upload__container {
  width: 100%;
  height: 100%;
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-rounded-lg, 8px);
  background: var(--ina-background-primary, #fff);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.ina-single-file-upload__container:hover:not(
    .ina-single-file-upload__container--disabled
  ) {
  border-color: var(--ina-content-primary, #000);
}
.ina-single-file-upload__container--active {
  border: 1px solid var(--ina-content-primary, #000);
  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), inset 0 0 0 3px #f3f3f3;
}
.ina-single-file-upload__container--disabled {
  background: var(--ina-background-secondary);
  border-color: var(--ina-stroke-primary);
  cursor: not-allowed;
  pointer-events: none;
}
.ina-single-file-upload__input {
  display: none;
}
/* Default State - Upload Icon */
.ina-single-file-upload__icon-wrapper {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ina-single-file-upload__icon-wrapper--default {
  color: var(--ina-content-primary);
}
.ina-single-file-upload__icon-wrapper--disabled {
  color: var(--ina-content-tertiary);
}
/* Success State - File Icon */
.ina-single-file-upload__icon-wrapper--file {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 8px;
  background: var(--ina-background-secondary);
  border-radius: var(--ina-rounded-lg, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ina-single-file-upload__file-icon {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
/* Content Area */
.ina-single-file-upload__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ina-single-file-upload__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ina-content-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ina-single-file-upload__description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--ina-content-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ina-single-file-upload__container--disabled .ina-single-file-upload__title,
.ina-single-file-upload__container--disabled
  .ina-single-file-upload__description,
.ina-single-file-upload__container--disabled
  .ina-single-file-upload__icon-wrapper--default {
  color: var(--ina-content-tertiary);
}
/* Progress State */
.ina-single-file-upload__progress {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ina-single-file-upload__progress-bar {
  width: 100%;
  height: 4px;
  background: var(--ina-background-secondary);
  border-radius: 2px;
  overflow: hidden;
}
.ina-single-file-upload__progress-fill {
  height: 100%;
  background: var(--ina-primary-300, #d4d4d4);
  transition: width 0.3s ease;
}
.ina-single-file-upload__progress-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--ina-content-secondary);
  margin: 0;
}
/* Delete Button */
.ina-single-file-upload__delete-button {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ina-negative-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.ina-single-file-upload__delete-button:hover {
  color: var(--ina-negative-600, var(--ina-red-600));
}
.ina-single-file-upload__delete-button:focus-visible {
  outline: 2px solid var(--ina-content-primary, #000);
  outline-offset: 2px;
  border-radius: 2px;
}
/**
 * Skeleton Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-skeleton {
  /* Base skeleton styling */
  position: relative;
  overflow: hidden;
  background-color: var(--ina-neutral-200);
  animation: skeletonPulse 2s ease-in-out infinite;
}
@keyframes skeletonPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* Width variants */
.ina-skeleton--width-xs {
  width: 32px;
}
.ina-skeleton--width-sm {
  width: 64px;
}
.ina-skeleton--width-md {
  width: 128px;
}
.ina-skeleton--width-lg {
  width: 256px;
}
.ina-skeleton--width-xl {
  width: 512px;
}
.ina-skeleton--width-full {
  width: 100%;
}
/* Height variants */
.ina-skeleton--height-xs {
  height: 8px;
}
.ina-skeleton--height-sm {
  height: 16px;
}
.ina-skeleton--height-md {
  height: 32px;
}
.ina-skeleton--height-lg {
  height: 64px;
}
.ina-skeleton--height-xl {
  height: 128px;
}
.ina-skeleton--height-full {
  height: 100%;
}
/* Border radius variants */
.ina-skeleton--rounded-none {
  border-radius: 0;
}
.ina-skeleton--rounded-xs {
  border-radius: var(--ina-radius-xs);
}
.ina-skeleton--rounded-sm {
  border-radius: var(--ina-radius-sm);
}
.ina-skeleton--rounded-md {
  border-radius: var(--ina-radius-md);
}
.ina-skeleton--rounded-lg {
  border-radius: var(--ina-radius-lg);
}
.ina-skeleton--rounded-full {
  border-radius: var(--ina-radius-full);
}
/* Color variants */
.ina-skeleton--color-gray {
  background-color: var(--ina-neutral-200);
}
.ina-skeleton--color-blue {
  background-color: var(--ina-primary-100);
}
.ina-skeleton--color-green {
  background-color: var(--ina-positive-100);
}
.ina-skeleton--color-red {
  background-color: var(--ina-negative-100);
}
.ina-skeleton--color-yellow {
  background-color: var(--ina-warning-100);
}
/* Animation styles */
.ina-skeleton--animation-pulse {
  animation: skeletonPulse 2s ease-in-out infinite;
}
.ina-skeleton--animation-wave {
  animation: skeletonWave 1.5s ease-in-out infinite;
}
@keyframes skeletonWave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.ina-skeleton--animation-fade {
  animation: skeletonFade 1.8s ease-in-out infinite;
}
@keyframes skeletonFade {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
/* Wave effect overlay */
.ina-skeleton__wave {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: skeletonWave 1.5s ease-in-out infinite;
}
.ina-skeleton--animation-wave .ina-skeleton__wave {
  display: block;
}
/* Glow effect */
.ina-skeleton--effect-glow {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* Gradient variants */
.ina-skeleton--gradient-linear {
  background: linear-gradient(
    90deg,
    var(--ina-neutral-200) 25%,
    var(--ina-neutral-300) 50%,
    var(--ina-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: skeletonGradient 1.5s infinite ease-out;
}
@keyframes skeletonGradient {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.ina-skeleton--gradient-radial {
  background: radial-gradient(
    circle at center,
    var(--ina-neutral-200) 40%,
    var(--ina-neutral-300) 100%
  );
}
/* Shape variants */
.ina-skeleton--shape-circle {
  border-radius: var(--ina-radius-full);
}
.ina-skeleton--shape-rectangle {
  border-radius: var(--ina-radius-md);
}
.ina-skeleton--shape-square {
  border-radius: var(--ina-radius-base);
}
/* Text skeleton specific styling */
.ina-skeleton--text {
  border-radius: var(--ina-radius-base);
  height: 1em;
  width: 100%;
}
.ina-skeleton--text--sm {
  height: 0.875em;
}
.ina-skeleton--text--base {
  height: 1em;
}
.ina-skeleton--text--lg {
  height: 1.125em;
}
/* Block skeleton for rectangular shapes */
.ina-skeleton--block {
  border-radius: var(--ina-radius-md);
}
/* Avatar skeleton */
.ina-skeleton--avatar {
  border-radius: var(--ina-radius-full);
  aspect-ratio: 1;
}
.ina-skeleton--avatar--sm {
  width: 32px;
  height: 32px;
}
.ina-skeleton--avatar--md {
  width: 48px;
  height: 48px;
}
.ina-skeleton--avatar--lg {
  width: 64px;
  height: 64px;
}
/* Button skeleton */
.ina-skeleton--button {
  border-radius: var(--ina-radius-md);
  height: 40px;
  width: 120px;
}
.ina-skeleton--button--sm {
  height: 32px;
  width: 100px;
}
.ina-skeleton--button--lg {
  height: 48px;
  width: 140px;
}
/* Card skeleton */
.ina-skeleton--card {
  border-radius: var(--ina-radius-lg);
  width: 300px;
  height: 200px;
}
/* Loading state */
.ina-skeleton--loading {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Skeleton group/spinner */
.ina-skeleton__group {
  display: flex;
  gap: var(--ina-spacing-3);
  align-items: center;
}
.ina-skeleton__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ina-neutral-300);
  border-top-color: var(--ina-primary-500);
  border-radius: var(--ina-radius-full);
  animation: skeletonSpin 1s linear infinite;
}
@keyframes skeletonSpin {
  to {
    transform: rotate(360deg);
  }
}
/* Compound skeletons */
.ina-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-3);
}
.ina-skeleton-group--horizontal {
  flex-direction: row;
  align-items: center;
}
.ina-skeleton-group__item {
  flex-shrink: 0;
}
.ina-skeleton-group__item--flex {
  flex: 1;
}
/* Custom sizes with CSS variables */
.ina-skeleton--custom-size {
  width: var(--skeleton-width, 100%);
  height: var(--skeleton-height, auto);
}
/* Responsive behavior */
@media (max-width: 640px) {
  .ina-skeleton--responsive-full {
    width: 100%;
  }

  .ina-skeleton-group--horizontal {
    flex-direction: column;
    align-items: stretch;
  }

  .ina-skeleton--avatar--lg {
    width: 48px;
    height: 48px;
  }

  .ina-skeleton--card {
    width: 100%;
    max-width: 300px;
  }
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-skeleton {
    background-color: var(--ina-neutral-700);
  }

  .ina-skeleton--color-gray {
    background-color: var(--ina-neutral-700);
  }

  .ina-skeleton--color-blue {
    background-color: var(--ina-primary-900);
  }

  .ina-skeleton--color-green {
    background-color: var(--ina-positive-900);
  }

  .ina-skeleton--color-red {
    background-color: var(--ina-negative-900);
  }

  .ina-skeleton--color-yellow {
    background-color: var(--ina-warning-900);
  }

  .ina-skeleton--gradient-linear {
    background: linear-gradient(
      90deg,
      var(--ina-neutral-700) 25%,
      var(--ina-neutral-600),
      var(--ina-neutral-700) 75%
    );
    background-size: 200% 100%;
  }

  .ina-skeleton--gradient-radial {
    background: radial-gradient(
      circle at center,
      var(--ina-neutral-700) 40%,
      var(--ina-neutral-600) 100%
    );
  }

  .ina-skeleton__wave {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
    );
  }

  .ina-skeleton__spinner {
    border-color: var(--ina-neutral-600);
    border-top-color: var(--ina-primary-400);
  }
} */
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-skeleton {
    border: 1px solid var(--ina-content-primary);
  }

  .ina-skeleton--animation-pulse,
  .ina-skeleton--animation-wave,
  .ina-skeleton--animation-fade {
    animation-duration: 0.1s;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-skeleton,
  .ina-skeleton--animation-pulse,
  .ina-skeleton--animation-wave,
  .ina-skeleton--animation-fade,
  .ina-skeleton__wave,
  .ina-skeleton__spinner,
  .ina-skeleton--gradient-linear {
    animation: none;
  }

  .ina-skeleton {
    opacity: 0.7;
  }

  .ina-skeleton__wave {
    display: none;
  }
}
/* Accessibility improvements */
.ina-skeleton[aria-hidden='true'] {
  visibility: hidden;
}
/* Print styles */
@media print {
  .ina-skeleton {
    display: none;
  }
}
/* Custom shimmer implementation */
.ina-skeleton--shimmer {
  background: linear-gradient(
    270deg,
    var(--ina-neutral-100) 0%,
    var(--ina-neutral-300) 50%,
    var(--ina-neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/**
 * Spinner Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-spinner {
  /* Base container styling */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--ina-spacing-2);
}
/* Spinner element */
.ina-spinner__element {
  border-radius: var(--ina-radius-full);
  animation: spinnerSpin 1s linear infinite;
  border-style: solid;
}
/* Default sizes */
.ina-spinner__element--size-xs {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.ina-spinner__element--size-sm {
  width: 24px;
  height: 24px;
  border-width: 2px;
}
.ina-spinner__element--size-md {
  width: 32px;
  height: 32px;
  border-width: 4px;
}
.ina-spinner__element--size-lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}
.ina-spinner__element--size-xl {
  width: 64px;
  height: 64px;
  border-width: 6px;
}
@keyframes spinnerSpin {
  to {
    transform: rotate(360deg);
  }
}
/* Color variants */
.ina-spinner__element--color-primary {
  border-color: var(--ina-neutral-300) !important;
  border-top-color: var(--ina-primary-500) !important;
}
.ina-spinner__element--color-secondary {
  border-color: var(--ina-neutral-300);
  border-top-color: var(--ina-neutral-500);
}
.ina-spinner__element--color-success {
  border-color: var(--ina-neutral-300);
  border-top-color: var(--ina-positive-500);
}
.ina-spinner__element--color-error {
  border-color: var(--ina-neutral-300);
  border-top-color: var(--ina-negative-500);
}
.ina-spinner__element--color-warning {
  border-color: var(--ina-neutral-300);
  border-top-color: var(--ina-warning-500);
}
.ina-spinner__element--color-info {
  border-color: var(--ina-neutral-300);
  border-top-color: var(--ina-info-500);
}
.ina-spinner__element--color-inherit {
  border-color: currentColor;
  border-top-color: transparent;
}
/* Custom track color */
.ina-spinner__element--track-gray {
  border-color: var(--ina-neutral-300);
}
.ina-spinner__element--track-light {
  border-color: var(--ina-neutral-200);
}
.ina-spinner__element--track-dark {
  border-color: var(--ina-neutral-500);
}
/* Border width variants */
.ina-spinner__element--border-thin {
  border-width: 2px;
}
.ina-spinner__element--border-medium {
  border-width: 3px;
}
.ina-spinner__element--border-thick {
  border-width: 4px;
}
.ina-spinner__element--border-heavy {
  border-width: 6px;
}
/* Text content */
.ina-spinner__title {
  font-size: var(--ina-font-base);
  font-weight: var(--ina-font-semibold);
  color: var(--ina-content-primary);
}
.ina-spinner__subtitle {
  font-size: var(--ina-font-sm);
  color: var(--ina-content-secondary);
}
/* Spinner variants */
.ina-spinner--variant-tail {
  gap: var(--ina-spacing-1);
}
.ina-spinner--variant-tail .ina-spinner__element {
  animation: spinnerTailSpin 0.8s ease-in-out infinite;
}
@keyframes spinnerTailSpin {
  0%,
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.7;
  }
}
.ina-spinner--variant-dots {
  flex-direction: row;
  gap: var(--ina-spacing-1);
}
.ina-spinner--variant-dots .ina-spinner__element {
  width: 8px;
  height: 8px;
  border-radius: var(--ina-radius-full);
  animation: spinnerDots 1.4s ease-in-out infinite both;
  border: none;
}
.ina-spinner--variant-dots .ina-spinner__element:nth-child(1) {
  animation-delay: -0.32s;
}
.ina-spinner--variant-dots .ina-spinner__element:nth-child(2) {
  animation-delay: -0.16s;
}
.ina-spinner__element--dot-1 {
  animation-delay: -0.32s;
}
.ina-spinner__element--dot-2 {
  animation-delay: -0.16s;
}
.ina-spinner__element--dot-3 {
  animation-delay: 0s;
}
@keyframes spinnerDots {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.ina-spinner--variant-bars {
  flex-direction: row;
  gap: var(--ina-spacing-1);
  align-items: center;
}
.ina-spinner--variant-bars .ina-spinner__element {
  width: 4px;
  height: 40px;
  border: none;
  background-color: currentColor;
  animation: spinnerBars 1.2s ease-in-out infinite;
}
.ina-spinner--variant-bars .ina-spinner__element:nth-child(1) {
  animation-delay: -1.1s;
}
.ina-spinner--variant-bars .ina-spinner__element:nth-child(2) {
  animation-delay: -1s;
}
.ina-spinner--variant-bars .ina-spinner__element:nth-child(3) {
  animation-delay: -0.9s;
}
.ina-spinner--variant-bars .ina-spinner__element:nth-child(4) {
  animation-delay: -0.8s;
}
@keyframes spinnerBars {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}
/* Speed variants */
.ina-spinner--speed-slow .ina-spinner__element {
  animation-duration: 2s;
}
.ina-spinner--speed-normal .ina-spinner__element {
  animation-duration: 1s;
}
.ina-spinner--speed-fast .ina-spinner__element {
  animation-duration: 0.5s;
}
/* Size variants dengan responsive adjustments */
.ina-spinner--size-responsive .ina-spinner__element {
  width: 32px;
  height: 32px;
  border-width: 4px;
}
@media (max-width: 640px) {
  .ina-spinner--size-responsive .ina-spinner__element {
    width: 24px;
    height: 24px;
    border-width: 3px;
  }

  .ina-spinner__title {
    font-size: var(--ina-font-sm); /* Turun dari base ke sm */
  }

  .ina-spinner__subtitle {
    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
  }
}
/* Spinner-only mode (no text) */
.ina-spinner--spinner-only {
  gap: 0;
}
.ina-spinner--spinner-only .ina-spinner__title,
.ina-spinner--spinner-only .ina-spinner__subtitle {
  display: none;
}
/* Loading state */
.ina-spinner--loading {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Background variants */
.ina-spinner--bg-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  z-index: 1000;
}
.ina-spinner--bg-card {
  background-color: var(--ina-background-primary);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-lg);
  padding: var(--ina-spacing-8);
  box-shadow: var(--ina-shadow-md);
}
/* Custom positioning */
.ina-spinner--position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ina-spinner--position-top {
  position: absolute;
  top: var(--ina-spacing-4);
  left: 50%;
  transform: translateX(-50%);
}
.ina-spinner--position-bottom {
  position: absolute;
  bottom: var(--ina-spacing-4);
  left: 50%;
  transform: translateX(-50%);
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-spinner__title {
    color: var(--ina-content-dark-primary);
  }

  .ina-spinner__subtitle {
    color: var(--ina-content-secondary);
  }

  .ina-spinner--bg-overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .ina-spinner--bg-card {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
  }
} */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-spinner__element,
  .ina-spinner--variant-tail .ina-spinner__element,
  .ina-spinner--variant-dots .ina-spinner__element,
  .ina-spinner--variant-bars .ina-spinner__element {
    animation: none;
  }

  .ina-spinner__element {
    /* Show static spinner */
    opacity: 0.7;
  }

  .ina-spinner--variant-dots .ina-spinner__element {
    /* Show static dots */
    opacity: 0.5;
  }
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-spinner__element {
    border-width: 3px;
  }

  .ina-spinner__title {
    font-weight: var(--ina-font-bold);
  }
}
/* Accessibility improvements */
.ina-spinner[aria-hidden='true'] {
  visibility: hidden;
}
.ina-spinner__sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Print styles */
@media print {
  .ina-spinner {
    display: none;
  }
}
/* Pulse animation alternative */
.ina-spinner__element--animation-pulse {
  animation: spinnerPulse 2s ease-in-out infinite;
}
@keyframes spinnerPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.95);
  }
}
/* Wave animation */
.ina-spinner__element--animation-wave {
  animation: spinnerWave 2s ease-in-out infinite;
}
@keyframes spinnerWave {
  0%,
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: rotate(90deg);
    opacity: 0.7;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.9;
  }
  75% {
    transform: rotate(270deg);
    opacity: 0.7;
  }
}
.ina-stepper {
  display: flex;
  position: relative;
}
/* Horizontal Layout */
.ina-stepper--horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  min-height: 80px;
  padding: 0 20px;
}
.ina-stepper--vertical .ina-stepper__separator {
  position: relative;
  left: 12px;
}
/* Vertical Layout */
.ina-stepper--vertical {
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
/* Responsive: Horizontal stepper with horizontal scroll on mobile */
.ina-stepper--horizontal-responsive {
  flex-direction: row;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* Enable smooth scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar for a cleaner look, but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: var(--ina-stroke-primary, #e5e7eb) transparent;
}
.ina-stepper--horizontal-responsive::-webkit-scrollbar {
  height: 4px;
}
.ina-stepper--horizontal-responsive::-webkit-scrollbar-track {
  background: transparent;
}
.ina-stepper--horizontal-responsive::-webkit-scrollbar-thumb {
  background-color: var(--ina-stroke-primary, #e5e7eb);
  border-radius: 2px;
}
.ina-stepper--horizontal-responsive::-webkit-scrollbar-thumb:hover {
  background-color: var(--ina-content-tertiary, #9ca3af);
}
@media (max-width: 767px) {
  .ina-stepper--horizontal-responsive {
    /* Ensure horizontal scroll works on mobile */
    flex-wrap: nowrap;
    width: 100%;
    min-width: 100%;
  }

  .ina-stepper--horizontal-responsive .ina-stepper__item {
    /* Prevent items from shrinking, maintain their natural width */
    flex-shrink: 0;
    min-width: -moz-fit-content;
    min-width: fit-content;
  }
}
/* Step Item */
.ina-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 0;
}
.ina-stepper--vertical .ina-stepper__item {
  flex-direction: row;
  text-align: left;
  align-items: flex-start;
  padding: 0;
  width: 100%;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  overflow: visible;
}
.ina-stepper--vertical .ina-stepper__separator {
  min-height: 72px;
}
.ina-stepper--vertical .ina-stepper__item:last-child {
  margin-bottom: 0;
}
/* Icon Wrapper */
.ina-stepper__icon-wrapper {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: var(--ina-rounded-lg, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
  border: 1px solid var(--ina-stroke-primary);
  color: var(--ina-content-tertiary);
  background-color: var(--ina-background-secondary);
}
.ina-stepper--vertical .ina-stepper__icon-wrapper {
  margin-right: 0.75rem;
}
.ina-stepper__step-number {
  color: inherit;
  font-size: 16px;
  font-weight: 500;
}
.ina-stepper__check-icon {
  color: inherit;
  stroke: currentColor;
  width: 16px;
  height: 16px;
}
/* Label */
.ina-stepper__label {
  font-size: var(--ina-font-xs);
  color: var(--ina-content-primary);
  transition: color 0.2s ease;
  white-space: nowrap;
  position: absolute;
  top: 2rem;
}
.ina-stepper--vertical .ina-stepper__label {
  position: absolute;
  left: 2rem;
  top: 0.25rem;
}
.ina-stepper--vertical .ina-stepper__label {
  margin-top: 0;
  flex-grow: 1;
}
/* Separator */
.ina-stepper__separator {
  flex-grow: 1;
  width: 2px;
  height: 2px;
  background-color: var(--ina-stroke-primary);
  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px */
  /* Separator width/height is 2px, so we need to position it so its center aligns with icon center */
  align-self: center;
  position: relative;
  z-index: 0;
  transition: background-color 0.2s ease;
}
.ina-stepper--vertical .ina-stepper__separator {
  width: 2px;
  height: 2rem;
  flex-grow: 0;
  align-self: flex-start;
  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
  /* Separator width is 2px, so we need to position it so its center aligns with icon center */
  /* margin-left: 12px (icon center) - 1px (half separator) = 11px */
  position: relative;
  left: 12px;
}
/* States */
/* Active State */
.ina-stepper__item--active .ina-stepper__icon-wrapper {
  border-color: var(--ina-guide-500);
  color: var(--ina-guide-500);
  background-color: var(--ina-guide-50);
}
/* .ina-stepper__item--active .ina-stepper__label {
  color: var(--ina-guide-500);
  font-weight: 500;
} */
/* Done/Completed State */
.ina-stepper__item--completed .ina-stepper__icon-wrapper {
  border-color: var(--ina-positive-600);
  color: var(--ina-positive-600);
  background-color: var(--ina-positive-50);
}
/* .ina-stepper__item--completed .ina-stepper__label {
  color: var(--ina-positive-600);
} */
/* Inactive State (default) */
.ina-stepper__item:not(.ina-stepper__item--active):not(
    .ina-stepper__item--completed
  ):not(.ina-stepper__item--error)
  .ina-stepper__icon-wrapper {
  border-color: var(--ina-stroke-primary);
  color: var(--ina-content-tertiary);
  background-color: var(--ina-background-secondary);
}
.ina-stepper__item:not(.ina-stepper__item--active):not(
    .ina-stepper__item--completed
  ):not(.ina-stepper__item--error)
  .ina-stepper__label {
  color: var(--ina-content-tertiary);
}
/* Error State */
.ina-stepper__item--error .ina-stepper__icon-wrapper {
  border-color: var(--ina-negative-500);
  color: var(--ina-negative-500);
  background-color: var(--ina-negative-50);
}
/* .ina-stepper__item--error .ina-stepper__label {
  color: var(--ina-negative-500);
} */
.ina-stepper__item--clickable {
  cursor: pointer;
}
.ina-stepper__item--clickable:hover .ina-stepper__icon-wrapper {
  border-color: var(--ina-semantic-info);
}
.ina-stepper__item--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Separator States */
/* Completed separator - positive-600 */
.ina-stepper__separator--completed {
  background-color: var(--ina-positive-600);
  width: 2px;
  height: 2px;
}
.ina-stepper--vertical .ina-stepper__separator--completed {
  width: 2px;
  height: 2rem;
}
/* Inactive separator - stroke-primary (default) */
.ina-stepper__separator:not(.ina-stepper__separator--completed) {
  background-color: var(--ina-stroke-primary);
}
.ina-stepper.ina-stepper--horizontal .ina-stepper__separator {
  min-width: 40px;
}
/* =========================== */
/* HORIZONTAL TAB STYLES       */
/* =========================== */
.ina-tab-horizontal {
  display: flex;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
}
.ina-tab-horizontal--full-width {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.ina-tab-horizontal__container {
  display: flex;
  align-items: center;
}
.ina-tab-horizontal__container--full-width {
  width: 100%;
  min-width: -moz-max-content;
  min-width: max-content;
}
/* Base Tab Styles */
.ina-tab-horizontal__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  transition: all var(--ina-transition-base);
  white-space: nowrap;
  position: relative;
  border-radius: 4px;
  padding: 0 16px;
  box-sizing: border-box;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--ina-spacing-letter-normal, 0);
}
.ina-tab-horizontal__tab--full-width {
  flex: 1 0 0;
  min-width: 120px;
}
/* Size: Small */
.ina-tab-horizontal__tab--size-sm {
  font-size: 14px;
  line-height: 20px;
  height: 36px;
}
/* Size: Medium */
.ina-tab-horizontal__tab--size-md {
  font-size: 16px;
  line-height: 20px;
  height: 40px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
  .ina-tab-horizontal__tab--size-sm {
    font-size: 12px;
    height: 32px;
  }

  .ina-tab-horizontal__tab--size-md {
    font-size: 14px;
    height: 36px;
  }

  .ina-tab-horizontal--full-width {
    max-width: 100vw;
  }
}
/* Variant: Outline (Default) */
.ina-tab-horizontal__tab--variant-outline {
  color: var(--ina-content-secondary);
  background: transparent;
  border-bottom: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
  border-radius: 0px;
}
.ina-tab-horizontal__tab--variant-outline:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-horizontal__tab--variant-outline.ina-tab-horizontal__tab--selected {
  color: var(--ina-content-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--ina-content-primary);
  border-radius: 0;
}
.ina-tab-horizontal--use-brand-color .ina-tab-horizontal__tab--variant-outline {
  color: var(--ina-content-secondary);
}
.ina-tab-horizontal--use-brand-color
  .ina-tab-horizontal__tab--variant-outline:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-primary-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-horizontal--use-brand-color
  .ina-tab-horizontal__tab--variant-outline.ina-tab-horizontal__tab--selected {
  color: var(--ina-primary-primary);
  border-bottom-color: var(--ina-primary-primary);
}
/* Variant: Button Brand */
.ina-tab-horizontal__tab--variant-button-brand {
  color: var(--ina-content-secondary);
  background: transparent;
}
.ina-tab-horizontal__tab--variant-button-brand:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-horizontal__tab--variant-button-brand.ina-tab-horizontal__tab--selected {
  background-color: var(--ina-primary-25);
  color: var(--ina-primary-primary) !important;
  font-weight: 600;
}
/* Variant: Button White */
.ina-tab-horizontal--variant-button-white {
  background-color: var(--ina-background-secondary);
  border-radius: 4px;
  padding: 4px;
}
.ina-tab-horizontal--variant-button-white .ina-tab-horizontal__container {
  gap: 0;
}
.ina-tab-horizontal__tab--variant-button-white {
  color: var(--ina-content-secondary);
  background: transparent;
  border-radius: 4px;
}
.ina-tab-horizontal__tab--variant-button-white:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-horizontal__tab--variant-button-white.ina-tab-horizontal__tab--selected {
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  font-weight: 600;
  box-shadow:
    0 12px 16px -4px rgba(10, 13, 18, 0.08),
    0 4px 6px -2px rgba(10, 13, 18, 0.03);
}
.ina-tab-horizontal--use-brand-color
  .ina-tab-horizontal__tab--variant-button-white {
  color: var(--ina-content-secondary);
}
.ina-tab-horizontal--use-brand-color
  .ina-tab-horizontal__tab--variant-button-white:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-primary-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-horizontal--use-brand-color
  .ina-tab-horizontal__tab--variant-button-white.ina-tab-horizontal__tab--selected {
  color: var(--ina-primary-primary);
}
/* Disabled State */
.ina-tab-horizontal__tab--disabled {
  color: var(--ina-content-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-tab-horizontal__tab--disabled:hover {
  color: var(--ina-content-disabled);
  background-color: transparent;
}
.ina-tab-horizontal--disabled .ina-tab-horizontal__tab {
  color: var(--ina-content-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-tab-horizontal--disabled .ina-tab-horizontal__tab:hover {
  color: var(--ina-content-disabled);
  background-color: transparent;
}
/* Focus State */
.ina-tab-horizontal__tab:focus {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
.ina-tab-horizontal__tab:focus:not(:focus-visible) {
  outline: none;
}
/* Dark Mode */
[data-theme='dark'] .ina-tab-horizontal__tab--variant-outline {
  color: var(--ina-content-secondary);
}
[data-theme='dark']
  .ina-tab-horizontal__tab--variant-outline:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-horizontal__tab--variant-button-brand:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-horizontal__tab--variant-button-brand:hover:not(
    .ina-tab-horizontal__tab--selected
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-horizontal__tab--variant-button-brand:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-horizontal__tab--variant-button-brand:hover:not(
    .ina-tab-horizontal__tab--selected
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-horizontal__tab--variant-outline.ina-tab-horizontal__tab--selected {
  color: var(--ina-content-primary);
  border-bottom-color: var(--ina-content-primary);
}
[data-theme='dark'] .ina-tab-horizontal__tab--variant-button-brand {
  color: var(--ina-content-secondary);
}
[data-theme='dark']
  .ina-tab-horizontal__tab--variant-button-brand:hover:not(
    .ina-tab-horizontal__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-horizontal__tab--variant-button-brand.ina-tab-horizontal__tab--selected {
  background-color: var(--ina-primary-25);
  color: var(--ina-primary-primary) !important;
}
[data-theme='dark'] .ina-tab-horizontal--variant-button-white {
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-horizontal__tab--variant-button-white.ina-tab-horizontal__tab--selected {
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
}
/* =========================== */
/* VERTICAL TAB STYLES         */
/* =========================== */
.ina-tab-vertical {
  display: flex;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
}
.ina-tab-vertical__container {
  display: flex;
  flex-direction: column;
}
/* Base Tab Styles */
.ina-tab-vertical__tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  background: none;
  cursor: pointer;
  transition: all var(--ina-transition-base);
  text-align: left;
  position: relative;
  border-radius: 4px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--ina-spacing-letter-normal, 0);
}
/* Size: Small */
.ina-tab-vertical__tab--size-sm {
  font-size: 14px;
  line-height: 20px;
  height: 36px;
}
/* Size: Medium */
.ina-tab-vertical__tab--size-md {
  font-size: 16px;
  line-height: 20px;
  height: 40px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
  .ina-tab-vertical__tab--size-sm {
    font-size: 12px;
    height: 32px;
  }

  .ina-tab-vertical__tab--size-md {
    font-size: 14px;
    height: 36px;
  }
}
/* Variant: Outline (Default) */
.ina-tab-vertical__tab--variant-outline {
  color: var(--ina-content-secondary);
  background: transparent;
}
.ina-tab-vertical__tab--variant-outline:hover:not(
    .ina-tab-vertical__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-vertical__tab--variant-outline.ina-tab-vertical__tab--selected {
  color: var(--ina-content-primary);
  font-weight: 600;
  border-left: 3px solid var(--ina-content-primary);
  border-radius: 0;
  padding-left: 13px; /* 16px - 3px border */
}
.ina-tab-vertical--use-brand-color .ina-tab-vertical__tab--variant-outline {
  color: var(--ina-content-secondary);
}
.ina-tab-vertical--use-brand-color
  .ina-tab-vertical__tab--variant-outline:hover:not(
    .ina-tab-vertical__tab--disabled
  ) {
  color: var(--ina-primary-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-vertical--use-brand-color
  .ina-tab-vertical__tab--variant-outline.ina-tab-vertical__tab--selected {
  color: var(--ina-primary-primary);
  border-left-color: var(--ina-primary-primary);
}
/* Variant: Button Brand */
.ina-tab-vertical__tab--variant-button-brand {
  color: var(--ina-content-secondary);
  background: transparent;
}
.ina-tab-vertical__tab--variant-button-brand:hover:not(
    .ina-tab-vertical__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
  background-color: var(--ina-primary-25);
  color: var(--ina-primary-primary) !important;
  font-weight: 600;
}
/* Variant: Button White */
.ina-tab-vertical--variant-button-white {
  background-color: var(--ina-background-secondary);
  border-radius: 4px;
  padding: 4px;
}
.ina-tab-vertical--variant-button-white .ina-tab-vertical__container {
  gap: 0;
}
.ina-tab-vertical__tab--variant-button-white {
  color: var(--ina-content-secondary);
  background: transparent;
  border-radius: 4px;
}
.ina-tab-vertical__tab--variant-button-white:hover:not(
    .ina-tab-vertical__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-vertical__tab--variant-button-white.ina-tab-vertical__tab--selected {
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  font-weight: 600;
  border-radius: 4px;
  box-shadow:
    0 12px 16px -4px rgba(10, 13, 18, 0.08),
    0 4px 6px -2px rgba(10, 13, 18, 0.03);
}
.ina-tab-vertical--use-brand-color
  .ina-tab-vertical__tab--variant-button-white {
  color: var(--ina-content-secondary);
}
.ina-tab-vertical--use-brand-color
  .ina-tab-vertical__tab--variant-button-white:hover:not(
    .ina-tab-vertical__tab--disabled
  ) {
  color: var(--ina-primary-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-vertical--use-brand-color
  .ina-tab-vertical__tab--variant-button-white.ina-tab-vertical__tab--selected {
  color: var(--ina-primary-primary);
}
/* Disabled State */
.ina-tab-vertical__tab--disabled {
  color: var(--ina-content-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-tab-vertical__tab--disabled:hover {
  color: var(--ina-content-disabled);
  background-color: transparent;
}
.ina-tab-vertical--disabled .ina-tab-vertical__tab {
  color: var(--ina-content-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-tab-vertical--disabled .ina-tab-vertical__tab:hover {
  color: var(--ina-content-disabled);
  background-color: transparent;
}
/* Focus State */
.ina-tab-vertical__tab:focus {
  outline: 2px solid var(--ina-primary-primary);
  outline-offset: 2px;
}
.ina-tab-vertical__tab:focus:not(:focus-visible) {
  outline: none;
}
/* Dark Mode */
[data-theme='dark'] .ina-tab-vertical__tab--variant-outline {
  color: var(--ina-content-secondary);
}
[data-theme='dark']
  .ina-tab-vertical__tab--variant-outline:hover:not(
    .ina-tab-vertical__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-vertical__tab--variant-outline.ina-tab-vertical__tab--selected {
  color: var(--ina-content-primary);
  border-left-color: var(--ina-content-primary);
}
[data-theme='dark'] .ina-tab-vertical__tab--variant-button-brand {
  color: var(--ina-content-secondary);
}
[data-theme='dark']
  .ina-tab-vertical__tab--variant-button-brand:hover:not(
    .ina-tab-vertical__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-vertical__tab--variant-button-brand:hover:not(
    .ina-tab-vertical__tab--selected
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-vertical__tab--variant-button-brand:hover:not(
    .ina-tab-vertical__tab--disabled
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
.ina-tab-vertical__tab--variant-button-brand:hover:not(
    .ina-tab-vertical__tab--selected
  ) {
  color: var(--ina-content-primary);
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
  background-color: var(--ina-primary-25);
  color: var(--ina-primary-primary) !important;
  font-weight: 600;
}
[data-theme='dark'] .ina-tab-vertical--variant-button-white {
  background-color: var(--ina-background-secondary);
}
[data-theme='dark']
  .ina-tab-vertical__tab--variant-button-white.ina-tab-vertical__tab--selected {
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
}
/**
 * Table Component Styles
 * Menggunakan BEM naming convention dengan prefix "ina-"
 */
.ina-table {
  width: 100%;
  max-width: 100%;
}
.ina-table__scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  /* Tetap bisa discroll secara vertikal jika ada popover/dropdown */
  /* overflow-y: auto;  */
  /* Ensure horizontal scrollbar is always visible when needed */
  scrollbar-width: thin;
  scrollbar-color: var(--ina-neutral-300) transparent;
}
/* Sembunyikan scrollbar vertikal khusus Webkit (Chrome, Safari, Edge) */
.ina-table__scroll-wrapper::-webkit-scrollbar:vertical {
  display: none;
  width: 0;
}
.ina-table__scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}
.ina-table__scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.ina-table__scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--ina-neutral-300);
  border-radius: 4px;
}
.ina-table__scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--ina-neutral-400);
}
/* Table container */
.ina-table__container {
  border-collapse: collapse;
  border-radius: var(--ina-radius-lg);
  box-shadow: var(--ina-shadow-sm);
  width: 100%;
  /* Ensure table content is not cut off */
  min-width: -moz-max-content;
  min-width: max-content;
  /* Ensure table doesn't exceed viewport width - will be constrained by parent */
  max-width: 100%;
  /* Allow tooltips to extend beyond table bounds */
  overflow: visible;
}
/* Table header */
.ina-table__header {
  border-top: 1px solid var(--ina-stroke-primary);
  border-bottom: 1px solid var(--ina-stroke-primary);
  background-color: var(--ina-background-primary);
  position: relative;
  z-index: 1;
}
/* Table header cell */
.ina-table__header-cell {
  padding: var(--ina-spacing-2);
  text-align: left;
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-normal);
  color: var(--ina-content-secondary);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
/* Sticky last column - only when enabled */
.ina-table--sticky-last-column .ina-table__header-cell:last-child,
.ina-table--sticky-last-column .ina-table__cell:last-child {
  position: sticky;
  right: 0;
  background-color: var(--ina-background-primary);
  z-index: 10;
  min-width: 120px;
  /* Allow tooltips to extend beyond sticky column bounds */
  overflow: visible;
}
.ina-table--sticky-last-column .ina-table__header-cell:last-child {
  z-index: 11;
}
/* Pseudo-element for the drop shadow to bypass border-collapse limitations */
.ina-table--sticky-last-column .ina-table__header-cell:last-child::before,
.ina-table--sticky-last-column .ina-table__cell:last-child::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 6px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.02));
  pointer-events: none;
}
.ina-table__header-cell--sortable {
  transition: background-color var(--ina-transition-base);
}
/* Sorting controls */
.ina-table__sort-controls {
  display: inline-flex;
  gap: var(--ina-spacing-0-5);
  margin-left: var(--ina-spacing-1);
}
.ina-table__sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ina-content-secondary);
  transition: color var(--ina-transition-base);
}
.ina-table__sort-button:hover {
  color: var(--ina-content-primary);
}
.ina-table__sort-button--active,
.ina-table__sort-button--active:hover {
  color: var(--ina-primary-600);
  /* border: 1px solid var(--ina-stroke-secondary);
  border-radius: var(--ina-radius-full); */
}
.ina-table__sort-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Table body */
.ina-table__body {
  background-color: var(--ina-background-primary);
  position: relative;
  /* Allow tooltips to extend beyond body bounds */
  overflow: visible;
}
/* Table row */
.ina-table__row {
  transition:
    opacity var(--ina-transition-duration-200),
    background-color var(--ina-transition-base);
  /* Allow tooltips to extend beyond row bounds */
  overflow: visible;
}
.ina-table__row:hover:not(.ina-table__row--disabled) {
  background-color: var(--ina-background-secondary);
}
.ina-table__row--disabled {
  opacity: 0.6;
}
.ina-table__row--loading {
  opacity: 0.6;
}
/* Clickable row */
.ina-table__row--clickable {
  cursor: pointer;
  transition: background-color var(--ina-transition-base);
}
.ina-table__row--clickable:hover {
  background-color: var(--ina-neutral-50);
}
.ina-table__row--clickable:active {
  background-color: var(--ina-neutral-100);
}
/* Table cell */
.ina-table__cell {
  padding: var(--ina-spacing-2);
  border-bottom: 1px solid var(--ina-stroke-primary);
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary);
  vertical-align: middle;
  /* Prevent cell content from being cut off */
  white-space: nowrap;
  min-width: -moz-fit-content;
  min-width: fit-content;
  /* Allow tooltips to extend beyond cell bounds */
  overflow: visible;
  position: relative;
}
.ina-table__cell--editable {
  cursor: pointer;
  position: relative;
}
.ina-table__cell--editing {
  background-color: var(--ina-primary-50);
  padding: 0;
}
/* Selection checkbox cell */
.ina-table__selection-cell {
  padding: var(--ina-spacing-3) var(--ina-spacing-4);
  border-bottom: 1px solid var(--ina-stroke-primary);
  text-align: center;
  vertical-align: middle;
}
.ina-table__search {
  display: flex;
  flex-direction: column;
  gap: var(--ina-spacing-2);
  align-items: stretch;
}
.ina-table__search-input {
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-md);
  padding: var(--ina-spacing-2);
  color: var(--ina-content-primary);
  outline: none;
  font-size: var(--ina-font-xs);
  transition:
    border-color var(--ina-transition-base),
    box-shadow var(--ina-transition-base);
}
.ina-table__search-input:focus {
  border-color: var(--ina-primary-500);
  box-shadow: inset 0 0 0 1px var(--ina-primary-500);
}
.ina-table__search-input:disabled {
  background-color: var(--ina-neutral-100);
  cursor: not-allowed;
}
.ina-table__search-button {
  background-color: var(--ina-primary-blue-500);
  color: var(--ina-background-primary);
  padding: var(--ina-spacing-2) var(--ina-spacing-4);
  border-radius: var(--ina-radius-md);
  border: none;
  cursor: pointer;
  font-size: var(--ina-font-xs);
  transition: background-color var(--ina-transition-base);
  margin-left: 0;
}
.ina-table__search-button:hover:not(:disabled) {
  background-color: var(--ina-primary-blue-600);
}
.ina-table__search-button:focus-visible {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
.ina-table__search-button:disabled {
  background-color: var(--ina-neutral-300);
  color: var(--ina-neutral-500);
  cursor: not-allowed;
}
/* Progress bar */
.ina-table__progress-bar {
  margin-bottom: 0;
}
/* Empty state */
.ina-table__empty-cell {
  padding: var(--ina-spacing-4);
  text-align: center;
  font-size: var(--ina-font-xs);
  color: var(--ina-content-secondary);
}
/* Pagination */
.ina-table__pagination {
  padding: var(--ina-spacing-2);
}
/* Responsive adjustments */
@media (min-width: 640px) {
  .ina-table__container {
    min-width: -moz-max-content;
    min-width: max-content;
  }
  .ina-table__search {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ina-spacing-4);
  }

  .ina-table__search-button {
    margin-left: var(--ina-spacing-2);
  }
  .ina-table__pagination {
    padding: var(--ina-spacing-4);
  }
}
@media (min-width: 1280px) {
  .ina-table__header-cell,
  .ina-table__cell {
    padding: var(--ina-spacing-3) var(--ina-spacing-4);
    font-size: var(--ina-font-sm);
  }
  .ina-table__search-input {
    padding: var(--ina-spacing-2) var(--ina-spacing-3);
    font-size: var(--ina-font-sm);
  }
}
/* Table variants */
.ina-table--variant-bordered .ina-table__container {
  border: 1px solid var(--ina-stroke-primary);
}
.ina-table--variant-bordered .ina-table__cell,
.ina-table--variant-bordered .ina-table__selection-cell {
  border-right: 1px solid var(--ina-stroke-primary);
}
.ina-table--variant-striped .ina-table__header {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
.ina-table--variant-striped .ina-table__row:nth-child(odd) {
  background-color: var(--ina-background-primary, #ffffff);
}
.ina-table--variant-striped .ina-table__row:nth-child(even) {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
.ina-table__container.ina-table--variant-striped .ina-table__row:hover {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
.ina-table--variant-hover .ina-table__row:hover {
  background-color: var(--ina-primary-50);
}
/* Loading state */
.ina-table--loading .ina-table__container {
  position: relative;
}
.ina-table--loading .ina-table__container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
/* Dark mode support */
/* @media (prefers-color-scheme: dark) {
  .ina-table__header {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-table__header-cell {
    color: var(--ina-content-secondary);
  }

  .ina-table__header-cell--sortable:hover {
    background-color: var(--ina-neutral-800);
  }

  .ina-table__body {
    background-color: var(--ina-background-dark-primary);
  }

  .ina-table__row:hover:not(.ina-table__row--disabled) {
    background-color: var(--ina-neutral-800);
  }

  .ina-table__cell {
    color: var(--ina-content-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-table__cell--editing {
    background-color: var(--ina-primary-900);
  }

  .ina-table__row--disabled {
    opacity: 0.6;
  }

  .ina-table__search-input {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
    color: var(--ina-content-dark-primary);
  }

  .ina-table__search-input:focus {
    border-color: var(--ina-primary-400);
    box-shadow: inset 0 0 0 1px var(--ina-primary-400);
  }

  .ina-table__search-input:disabled {
    background-color: var(--ina-neutral-800);
  }

  .ina-table__empty-cell {
    color: var(--ina-content-secondary);
  }

  .ina-table--variant-striped .ina-table__row:nth-child(even) {
    background-color: var(--ina-neutral-900);
  }

  .ina-table--variant-hover .ina-table__row:hover {
    background-color: var(--ina-primary-900);
  }

  .ina-table--variant-bordered .ina-table__container {
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-table--variant-bordered .ina-table__cell,
  .ina-table--variant-bordered .ina-table__selection-cell {
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-table--loading .ina-table__container::after {
    background-color: rgba(0, 0, 0, 0.8);
  }
} */
/* Accessibility improvements */
.ina-table__header-cell:focus-visible {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
.ina-table__sort-button:focus-visible {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
.ina-table__cell--editable:focus-visible {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
/* Skip link for keyboard navigation */
.ina-table__skip-link {
  position: absolute;
  top: -40px;
  left: var(--ina-spacing-4);
  background-color: var(--ina-primary-500);
  color: var(--ina-background-primary);
  padding: var(--ina-spacing-1) var(--ina-spacing-2);
  border-radius: var(--ina-radius-base);
  text-decoration: none;
  font-size: var(--ina-font-xs);
  z-index: 1000;
}
.ina-table__skip-link:focus {
  top: var(--ina-spacing-4);
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-table__header {
    border-width: 2px;
  }

  .ina-table__cell {
    border-width: 1px;
  }

  .ina-table--variant-bordered .ina-table__container {
    border-width: 2px;
  }

  .ina-table__header-cell--sortable:hover,
  .ina-table__sort-button--active {
    background-color: var(--ina-primary-500);
    color: var(--ina-background-primary);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-table__row,
  .ina-table__header-cell--sortable,
  .ina-table__search-input,
  .ina-table__search-button,
  .ina-table__sort-button {
    animation: none;
    transition: none;
  }
}
/* Print styles */
@media print {
  .ina-table__search,
  .ina-table__pagination,
  .ina-table__progress-bar {
    display: none;
  }

  .ina-table__container {
    box-shadow: none;
  }

  .ina-table__header,
  .ina-table__body {
    background: none;
  }

  .ina-table__cell,
  .ina-table__header-cell {
    border-color: var(--ina-black);
  }
}
/* TableProgressBar Component Styles */
/* Base container */
.ina-table-progress-bar {
  width: 100%;
}
/* Animation states */
@keyframes ina-progress-animate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.ina-table-progress-bar--animating {
  animation: ina-progress-animate 0.2s ease-in-out;
}
/* Variant styles */
.ina-table-progress-bar--variant-primary {
  /* Inherits from ProgressBar component */
}
.ina-table-progress-bar--variant-secondary {
  /* Inherits from ProgressBar component */
}
.ina-table-progress-bar--variant-success {
  /* Inherits from ProgressBar component */
}
.ina-table-progress-bar--variant-warning {
  /* Inherits from ProgressBar component */
}
.ina-table-progress-bar--variant-error {
  /* Inherits from ProgressBar component */
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ina-table-progress-bar {
    /* Mobile-specific adjustments */
  }
}
/* TextArea Component Styles */
/* Base container */
.ina-text-area {
  display: flex;
  flex-direction: column;
}
/* Label */
.ina-text-area__label {
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(--ina-content-primary, #1f1f1f);
  margin-bottom: var(--ina-spacing-2, 0.5rem);
}
.ina-text-area__required {
  color: var(--ina-negative-500, #f02d2d);
  display: inline;
  margin-left: var(--ina-spacing-1, 0.25rem);
}
/* Input wrapper */
.ina-text-area__wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--ina-spacing-2, 0.5rem);
  border-radius: var(--ina-radius-lg, 0.5rem);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  background-color: var(--ina-background-primary, #ffffff);
  transition: all var(--ina-transition-base, 200ms ease-in-out);
}
/* Input field */
.ina-text-area__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--ina-font-sm);
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  color: var(--ina-content-primary, #1f1f1f);
  min-width: 0;
}
.ina-text-area__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-text-area__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
/* Prefix/suffix icons */
.ina-text-area__prefix-icon,
.ina-text-area__suffix-icon {
  flex-shrink: 0;
  padding-top: var(--ina-spacing-2);
}
/* Clear button */
.ina-text-area__clear-button {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-secondary, #525252);
  transition: color var(--ina-transition-base, 200ms ease-in-out);
}
.ina-text-area__clear-button:hover {
  color: var(--ina-content-primary);
}
.ina-text-area__clear-button:focus-visible {
  border: 2px solid var(--ina-stroke-secondary, #141414);
  background-color: var(--ina-background-secondary, #f8f8f7);
  color: var(--ina-content-primary);
  border-radius: var(--ina-radius-sm);
  outline: none;
}
.ina-text-area__clear-button:hover:not(:disabled) {
  color: var(--ina-content-secondary);
}
.ina-text-area__clear-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* Clear icon */
.ina-text-area__clear-icon {
  width: 16px;
  height: 16px;
}
/* Helper text/status message */
.ina-text-area .ina-text-area__helper-text {
  font-size: var(--ina-font-xs);
  padding-top: var(--ina-spacing-1);
}
.ina-text-area__helper-text--neutral {
  color: var(--ina-content-secondary, #525252);
}
.ina-text-area__helper-text--error {
  color: var(--ina-negative-500, #f02d2d);
}
.ina-text-area__helper-text--warning {
  color: var(--ina-warning-500, #eebb04);
}
.ina-text-area__helper-text--success {
  color: var(--ina-positive-600, #288034);
}
/* Character count */
.ina-text-area .ina-text-area__char-count {
  font-size: var(--ina-font-xs, 0.75rem);
  color: var(--ina-content-secondary, #525252);
  padding-top: var(--ina-spacing-1, 0.25rem);
}
/* Focus styles - Sesuai design Figma */
.ina-text-area__wrapper:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff) !important;
}
/* hover styles - Sesuai design Figma */
.ina-text-area__wrapper:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
/* Status variants */
.ina-text-area__wrapper--status-neutral {
  border-color: var(--ina-stroke-primary);
}
.ina-text-area__wrapper--status-neutral:focus-within {
  border-color: var(--ina-content-primary);
}
.ina-text-area__wrapper--status-error {
  border-color: var(--ina-negative-500);
}
.ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
  border-color: var(--ina-negative-600);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
}
.ina-text-area__wrapper--status-warning {
  border-color: var(--ina-warning-500);
}
.ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
  border-color: var(--ina-warning-600);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
}
.ina-text-area__wrapper--status-success {
  border-color: var(--ina-positive-600);
}
.ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
  border-color: var(--ina-positive-600);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
}
/* Disabled state */
.ina-text-area__wrapper--disabled {
  background-color: var(--ina-background-tertiary, #f2f2f2);
  border-color: var(--ina-stroke-primary) !important;
  cursor: not-allowed;
}
.ina-text-area__wrapper--disabled > .ina-text-area__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-text-area__wrapper--disabled > .ina-text-area__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-text-area__input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* Responsive adjustments */
@media (max-width: 639px) {
  .ina-text-area__wrapper {
    padding: var(--ina-spacing-2) var(--ina-spacing-3);
  }

  .ina-text-area__input,
  .ina-text-area__label {
    font-size: var(--ina-font-xs) !important;
  }
}
/* Dark mode */
/* @media (prefers-color-scheme: dark) {
  .ina-text-area__label {
    color: var(--ina-content-dark-primary);
  }

  .ina-text-area__wrapper {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-text-area__input {
    color: var(--ina-content-dark-primary);
  }

  .ina-text-area__input::placeholder {
    color: var(--ina-content-dark-placeholder);
  }

  .ina-text-area__clear-button {
    color: var(--ina-content-secondary);
  }

  .ina-text-area__clear-button:hover:not(:disabled) {
    color: var(--ina-content-dark-primary);
  }

  .ina-text-area__char-count {
    color: var(--ina-content-secondary);
  }

  .ina-text-area__wrapper--status-neutral:focus-within {
    border-color: var(--ina-primary-400);
  }
} */
/* TextField Component Styles */
/* Base container */
.ina-text-field {
  display: flex;
  flex-direction: column;
}
/* Label */
.ina-text-field__label {
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary, #1f1f1f);
  margin-bottom: var(--ina-spacing-2);
}
.ina-text-field__required {
  color: var(--ina-negative-500, #f02d2d);
  display: inline;
  margin-left: var(--ina-spacing-1, 0.25rem);
}
/* Input wrapper */
.ina-text-field__wrapper {
  display: flex;
  align-items: center;
  gap: var(--ina-spacing-2);
  border-radius: var(--ina-radius-lg);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
  background-color: var(--ina-background-primary, #ffffff);
  transition: all var(--ina-transition-base);
}
/* Size variants */
.ina-text-field__wrapper--size-sm {
  /* Desktop >= 768px */
  height: 40px;
}
.ina-text-field__wrapper--size-md {
  /* Desktop >= 768px */
  height: 44px;
}
.ina-text-field__wrapper--size-lg {
  /* Desktop >= 768px */
  height: 48px;
}
/* Responsive adjustments */
@media (max-width: 767px) {
  .ina-text-field__wrapper--size-sm {
    height: 36px;
  }

  .ina-text-field__wrapper--size-md {
    height: 40px;
  }

  .ina-text-field__wrapper--size-lg {
    height: 44px;
  }
}
@media (max-width: 639px) {
  .ina-text-field__wrapper--size-sm {
    height: 32px;
  }

  .ina-text-field__wrapper--size-md {
    height: 36px;
  }

  .ina-text-field__wrapper--size-lg {
    height: 40px;
  }
}
/* Input field */
.ina-text-field__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--ina-font-sm);
  color: var(--ina-content-primary, #1f1f1f);
  font-family: inherit;
  min-width: 0;
}
.ina-text-field__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-text-field__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
/* Prefix/suffix icons */
.ina-text-field__prefix-icon,
.ina-text-field__suffix-icon {
  flex-shrink: 0;
}
/* Clear button */
.ina-text-field__clear-button {
  padding: 2px !important;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-secondary, #525252);
  transition: color var(--ina-transition-base);
}
.ina-text-field__clear-button:hover {
  color: var(--ina-content-primary);
}
.ina-text-field__clear-button:focus-visible {
  border: 2px solid var(--ina-stroke-secondary, #141414);
  background-color: var(--ina-background-secondary, #f8f8f7);
  color: var(--ina-content-primary);
  border-radius: var(--ina-radius-sm);
}
.ina-text-field__clear-button:hover:not(:disabled) {
  color: var(--ina-content-secondary, #525252);
}
.ina-text-field__clear-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* Clear icon */
.ina-text-field__clear-icon {
  width: 16px;
  height: 16px;
}
/* Bottom area with helper text and char count */
.ina-text-field__bottom-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ina-spacing-6);
}
/* Helper text/status message */
.ina-text-field__helper-text {
  font-size: var(--ina-font-xs);
  padding-top: var(--ina-spacing-1);
}
.ina-text-field
  .ina-text-field__helper-text.ina-text-field__helper-text--neutral {
  color: var(--ina-content-secondary, #525252);
}
.ina-text-field
  .ina-text-field__helper-text.ina-text-field__helper-text--error {
  color: var(--ina-negative-500, #f02d2d);
}
.ina-text-field
  .ina-text-field__helper-text.ina-text-field__helper-text--warning {
  color: var(--ina-warning-500, #eebb04);
}
.ina-text-field
  .ina-text-field__helper-text.ina-text-field__helper-text--success {
  color: var(--ina-positive-600, #288034);
}
/* Character count */
.ina-text-field .ina-text-field__char-count {
  font-size: var(--ina-font-xs);
  color: var(--ina-content-secondary, #525252);
  padding-top: var(--ina-spacing-1, 0.25rem);
}
/* Status variants */
.ina-text-field__wrapper--status-neutral {
  border-color: var(--ina-stroke-primary, #e5e5e5);
}
.ina-text-field__wrapper--status-neutral:focus-within {
  border-color: var(--ina-content-primary, #1f1f1f);
}
.ina-text-field__wrapper--status-error {
  border-color: var(--ina-negative-500, #f02d2d);
}
.ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
  border-color: var(--ina-negative-600, #d50b0b);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
}
.ina-text-field__wrapper--status-warning {
  border-color: var(--ina-warning-500, #eebb04);
}
.ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
  border-color: var(--ina-warning-600, #855f00);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
}
.ina-text-field__wrapper--status-success {
  border-color: var(--ina-positive-600, #288034);
}
.ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
  border-color: var(--ina-positive-600, #288034);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
}
/* Disabled state */
.ina-text-field__wrapper--disabled {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  border-color: var(--ina-stroke-primary, #e5e5e5) !important;
  cursor: not-allowed;
}
.ina-text-field__wrapper--disabled > .ina-text-field__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-text-field__wrapper--disabled > .ina-text-field__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-text-field__input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* Focus styles - Sesuai design Figma */
.ina-text-field__wrapper:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
/* hover styles - Sesuai design Figma */
.ina-text-field__wrapper:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
/* Responsive adjustments */
@media (max-width: 639px) {
  .ina-text-field__wrapper {
    padding: var(--ina-spacing-2) var(--ina-spacing-3);
  }

  .ina-text-field__input,
  .ina-text-field__label {
    font-size: var(--ina-font-xs) !important;
  }

  .ina-text-field__bottom-area {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ina-spacing-1);
  }
}
/* Dark mode */
/* @media (prefers-color-scheme: dark) {
  .ina-text-field__label {
    color: var(--ina-content-dark-primary);
  }

  .ina-text-field__wrapper {
    background-color: var(--ina-background-dark-primary);
    border-color: var(--ina-stroke-primary-dark);
  }

  .ina-text-field__input {
    color: var(--ina-content-dark-primary);
  }

  .ina-text-field__input::placeholder {
    color: var(--ina-content-dark-placeholder);
  }

  .ina-text-field__clear-button {
    color: var(--ina-content-secondary);
  }

  .ina-text-field__clear-button:hover:not(:disabled) {
    color: var(--ina-content-dark-primary);
  }

  .ina-text-field__char-count {
    color: var(--ina-content-secondary);
  }

  .ina-text-field__wrapper--status-neutral:focus-within {
    border-color: var(--ina-primary-400);
  }

  .ina-text-field__wrapper--disabled {
    background-color: var(--ina-neutral-900);
  }
} */
/* =========================== */
/* THEME TOGGLE STYLES          */
/* =========================== */
.ina-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ina-spacing-3);
}
/* Label */
.ina-theme-toggle__label {
  font-size: var(--ina-font-sm);
  font-weight: var(--ina-font-medium);
  color: var(--ina-text-secondary);
  white-space: nowrap;
}
/* Main Toggle Button */
.ina-theme-toggle__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: var(--ina-radius-full);
  padding: var(--ina-spacing-2);
  transition: all var(--ina-transition-base);
}
.ina-theme-toggle__button:hover {
  background-color: var(--ina-background-secondary);
  transform: scale(1.05);
}
.ina-theme-toggle__button:active {
  transform: scale(0.95);
}
.ina-theme-toggle__button:focus-visible {
  outline: 2px solid var(--ina-primary-500);
  outline-offset: 2px;
}
/* Icon Container */
.ina-theme-toggle__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-text-secondary);
  transition: all var(--ina-transition-base);
  z-index: 2;
}
/* Icon Colors for Light Mode */
[data-theme='light'] .ina-theme-toggle__icon {
  color: var(--ina-primary-600);
}
[data-theme='dark'] .ina-theme-toggle__icon {
  color: var(--ina-primary-400);
}
/* Track */
.ina-theme-toggle__track {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 12px;
  background-color: var(--ina-neutral-300);
  border-radius: var(--ina-radius-full);
  transition: all var(--ina-transition-base);
  z-index: 1;
}
/* Track active state */
[data-theme='dark'] .ina-theme-toggle__track {
  background-color: var(--ina-primary-500);
}
/* Size variants */
.ina-theme-toggle--size-sm {
  gap: var(--ina-spacing-2);
}
.ina-theme-toggle--size-sm .ina-theme-toggle__label {
  font-size: var(--ina-font-xs);
}
.ina-theme-toggle--size-sm .ina-theme-toggle__button {
  padding: var(--ina-spacing-1);
  min-width: 32px;
  height: 32px;
}
.ina-theme-toggle--size-sm .ina-theme-toggle__track {
  width: 20px;
  height: 10px;
}
.ina-theme-toggle--size-md .ina-theme-toggle__button {
  padding: var(--ina-spacing-2);
  min-width: 40px;
  height: 40px;
}
.ina-theme-toggle--size-md .ina-theme-toggle__track {
  width: 24px;
  height: 12px;
}
.ina-theme-toggle--size-lg {
  gap: var(--ina-spacing-4);
}
.ina-theme-toggle--size-lg .ina-theme-toggle__label {
  font-size: var(--ina-font-base);
}
.ina-theme-toggle--size-lg .ina-theme-toggle__button {
  padding: var(--ina-spacing-3);
  min-width: 48px;
  height: 48px;
}
.ina-theme-toggle--size-lg .ina-theme-toggle__track {
  width: 28px;
  height: 14px;
}
/* Responsive adjustments */
@media (max-width: 640px) {
  .ina-theme-toggle__label {
    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
  }

  .ina-theme-toggle--size-sm .ina-theme-toggle__label {
    font-size: var(--ina-font-xs); /* Tetap xs */
  }

  .ina-theme-toggle--size-lg .ina-theme-toggle__label {
    font-size: var(--ina-font-sm); /* Turun dari base ke sm */
  }
}
/* Animation for icon rotation */
.ina-theme-toggle__icon {
  animation: none;
}
[data-theme='light'] .ina-theme-toggle__icon:last-child {
  animation: rotate-in 0.3s ease-out;
}
[data-theme='dark'] .ina-theme-toggle__icon:first-child {
  animation: rotate-out 0.3s ease-out;
}
/* Keyframes */
@keyframes rotate-in {
  from {
    opacity: 0;
    transform: rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes rotate-out {
  from {
    opacity: 0;
    transform: rotate(90deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}
/* Hover effects */
.ina-theme-toggle__button:hover .ina-theme-toggle__icon {
  color: var(--ina-content-primary);
}
[data-theme='light'] .ina-theme-toggle__button:hover .ina-theme-toggle__icon {
  color: var(--ina-primary-500);
}
[data-theme='dark'] .ina-theme-toggle__button:hover .ina-theme-toggle__icon {
  color: var(--ina-primary-300);
}
/* Disabled state */
.ina-theme-toggle--disabled .ina-theme-toggle__button {
  cursor: not-allowed;
  opacity: 0.5;
}
.ina-theme-toggle--disabled .ina-theme-toggle__button:hover {
  background-color: transparent;
  transform: none;
}
.ina-theme-toggle--disabled .ina-theme-toggle__icon {
  color: var(--ina-content-tertiary);
}
/* Accessible focus ring */
.ina-theme-toggle__button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ina-background-primary),
    inset 0 0 0 4px var(--ina-primary-500);
}
/* High contrast mode */
@media (prefers-contrast: high) {
  .ina-theme-toggle__button {
    border: 2px solid var(--ina-stroke-primary);
  }

  .ina-theme-toggle__track {
    border: 1px solid var(--ina-stroke-primary);
  }

  .ina-theme-toggle__button:focus-visible {
    outline-width: 3px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-theme-toggle__button,
  .ina-theme-toggle__icon {
    transition: none;
  }

  .ina-theme-toggle__icon {
    animation: none;
  }
}
/* Dark mode specific adjustments */
[data-theme='dark'] .ina-theme-toggle {
  /* Ensure proper contrast in dark mode */
}
[data-theme='dark'] .ina-theme-toggle__label {
  color: var(--ina-text-secondary);
}
[data-theme='dark'] .ina-theme-toggle__button:hover {
  background-color: var(--ina-background-secondary);
}
/* =========================== */
/* TIME PICKER STYLES          */
/* =========================== */
.ina-time-picker {
  position: relative;
  display: inline-block;
  background-color: inherit;
}
/* Wrapper */
.ina-time-picker__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--ina-background-primary, #ffffff);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-lg, 0.5rem);
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  transition: all var(--ina-transition-base, 200ms ease-in-out);
}
/* Size variants */
.ina-time-picker--size-sm .ina-time-picker__wrapper {
  /* Desktop >= 768px */
  height: 40px;
}
.ina-time-picker--size-md .ina-time-picker__wrapper {
  /* Desktop >= 768px */
  height: 44px;
}
.ina-time-picker--size-lg .ina-time-picker__wrapper {
  /* Desktop >= 768px */
  height: 48px;
}
.ina-time-picker__label {
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-medium, 500);
  color: var(--ina-content-primary, #1f1f1f);
  margin-bottom: var(--ina-spacing-2, 0.5rem);
  display: block;
}
/* Responsive adjustments */
@media (max-width: 767px) {
  .ina-time-picker--size-sm .ina-time-picker__wrapper {
    height: 36px;
  }

  .ina-time-picker--size-md .ina-time-picker__wrapper {
    height: 40px;
  }

  .ina-time-picker--size-lg .ina-time-picker__wrapper {
    height: 44px;
  }
}
@media (max-width: 639px) {
  .ina-time-picker.ina-time-picker--size-sm .ina-time-picker__wrapper {
    height: 32px !important;
  }

  .ina-time-picker.ina-time-picker--size-md .ina-time-picker__wrapper {
    height: 36px !important;
  }

  .ina-time-picker.ina-time-picker--size-lg .ina-time-picker__wrapper {
    height: 40px !important;
  }
  .ina-time-picker__label {
    font-size: var(--ina-font-xs, 0.75rem);
  }
}
.ina-time-picker__wrapper:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
  border-color: var(--ina-stroke-primary, #e5e5e5);
}
.ina-time-picker--open .ina-time-picker__wrapper {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
/* Input */
.ina-time-picker__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ina-content-primary, #1f1f1f);
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: var(--ina-font-normal, 400);
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.ina-time-picker__input:disabled {
  cursor: not-allowed;
}
.ina-time-picker__input::-moz-placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
.ina-time-picker__input::placeholder {
  color: var(--ina-content-tertiary, #a3a3a3) !important;
}
/* Prefix Icon */
.ina-time-picker__prefix-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-tertiary, #a3a3a3);
  margin-right: var(--ina-spacing-2, 0.5rem);
}
/* Suffix Icon / Clear Button */
.ina-time-picker__suffix-icon,
.ina-time-picker__clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-secondary, #525252);
  margin-left: var(--ina-spacing-2, 0.5rem);
}
.ina-time-picker__clear-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: absolute;
  right: var(--ina-spacing-3, 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ina-time-picker__clear-button:hover {
  color: var(--ina-content-secondary, #525252);
}
.ina-time-picker__clear-button:focus-visible {
  border: 2px solid var(--ina-stroke-secondary, #141414);
  background-color: var(--ina-background-secondary, #f8f8f7);
  color: var(--ina-content-primary);
  border-radius: var(--ina-radius-sm);
}
/* Status Variants */
.ina-time-picker--status-error .ina-time-picker__wrapper {
  border-color: var(--ina-negative-600, #d50b0b);
}
.ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
  border-color: var(--ina-negative-600, #d50b0b);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
}
.ina-time-picker--status-warning .ina-time-picker__wrapper {
  border-color: var(--ina-warning-500, #eebb04);
}
.ina-time-picker--status-warning.ina-time-picker--open
  .ina-time-picker__wrapper {
  border-color: var(--ina-warning-600, #855f00);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
}
.ina-time-picker--status-success .ina-time-picker__wrapper {
  border-color: var(--ina-positive-600, #288034);
}
.ina-time-picker--status-success.ina-time-picker--open
  .ina-time-picker__wrapper {
  border-color: var(--ina-positive-600, #288034);
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
}
/* Disabled */
.ina-time-picker--disabled .ina-time-picker__wrapper {
  background-color: var(--ina-background-secondary, #f8f8f7);
  border-color: var(--ina-stroke-primary, #e5e5e5);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-time-picker--disabled .ina-time-picker__wrapper:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
  border-color: var(--ina-stroke-primary, #e5e5e5);
}
/* Panel */
.ina-time-picker__panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 100%; /* Match trigger width by default */
  z-index: 1000;
  background-color: var(--ina-background-primary, #ffffff);
  border: 1px solid var(--ina-stroke-primary, #e5e5e5);
  border-radius: var(--ina-radius-lg, 0.5rem);
  box-shadow: var(
    --ina-shadow-lg,
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1)
  );
  margin-top: var(--ina-spacing-2, 0.5rem);
  overflow: hidden;
  animation: time-picker-fade-in 0.15s ease-out;
}
/* Content Layout */
.ina-time-picker__content {
  display: flex;
  max-height: 224px;
}
.ina-time-picker__column {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--ina-stroke-primary, #e5e5e5);
  scrollbar-width: thin;
}
.ina-time-picker__column:last-child {
  border-right: none;
}
/* Hide scrollbar for Chrome/Safari/Opera */
.ina-time-picker__column::-webkit-scrollbar {
  width: 4px;
}
.ina-time-picker__column::-webkit-scrollbar-thumb {
  background-color: var(--ina-stroke-secondary, #d4d4d4);
  border-radius: 4px;
}
.ina-time-picker__column::-webkit-scrollbar-track {
  background: transparent;
}
.ina-time-picker__column-content {
  padding: var(--ina-spacing-1, 0.25rem);
}
/* Option */
.ina-time-picker__option {
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  font-size: var(--ina-font-sm, 0.875rem);
  color: var(--ina-content-primary, #1f1f1f);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  border-radius: var(--ina-radius-md, 0.375rem);
}
.ina-time-picker__option:hover,
.ina-time-picker__option--hovered {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
.ina-time-picker__option--selected {
  background-color: var(--ina-content-primary, #1f1f1f);
  color: var(--ina-white, #fff);
}
.ina-time-picker__option--selected:hover {
  background-color: var(--ina-content-primary, #1f1f1f);
}
.ina-time-picker__option:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  z-index: 1;
}
.ina-time-picker__option--disabled {
  color: var(--ina-content-tertiary, #a3a3a3);
  cursor: not-allowed;
  pointer-events: none;
}
.ina-time-picker__option--disabled.ina-time-picker__option--selected {
  background-color: var(--ina-background-tertiary, #f5f5f5);
  color: var(--ina-content-tertiary, #a3a3a3);
}
/* Actions Footer */
.ina-time-picker__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ina-spacing-2, 0.5rem);
  padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
  border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
  background-color: var(--ina-background-primary, #ffffff);
}
.ina-time-picker__action-button {
  background: none;
  border: none;
  color: var(--ina-content-primary, #1f1f1f);
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
  border-radius: var(--ina-radius-md, 0.375rem);
}
.ina-time-picker__action-button:hover {
  background-color: var(--ina-primary-50, #f0f0f0);
}
.ina-time-picker__confirm-button {
  background-color: var(--ina-content-primary, #1f1f1f);
  border: 1px solid var(--ina-content-primary, #1f1f1f);
  color: #ffffff;
  font-size: var(--ina-font-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-3, 0.75rem);
  border-radius: var(--ina-radius-md, 0.375rem);
}
.ina-time-picker__confirm-button:hover {
  opacity: 0.7;
}
.ina-time-picker__action-button:focus-visible,
.ina-time-picker__confirm-button:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  z-index: 1;
}
/* Focus styles - Sesuai design Figma */
.ina-time-picker__wrapper:focus-within {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
/* hover styles - Sesuai design Figma */
.ina-time-picker__wrapper:hover {
  background-color: var(--ina-background-secondary, #f8f8f7);
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
  .ina-time-picker__wrapper {
    border-width: 2px;
  }

  .ina-time-picker__panel {
    border-width: 2px;
  }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .ina-time-picker__wrapper,
  .ina-time-picker__panel,
  .ina-time-picker__option {
    transition: none;
  }

  .ina-time-picker__panel {
    animation: none;
  }
}
/* Responsive Design */
/* Responsive Design */
@media (max-width: 639px) {
  .ina-time-picker__panel {
    width: 100%;
    min-width: 100%;
    max-width: none;
    position: absolute;
    left: 0;
    right: auto; /* Allow unset right since width is 100% */
  }

  .ina-time-picker__content {
    max-height: 180px;
  }

  .ina-time-picker__option {
    min-height: 28px;
    font-size: var(--ina-font-xs, 0.75rem);
    padding: var(--ina-spacing-2, 0.5rem);
  }

  .ina-time-picker__wrapper {
    padding: 0.375rem var(--ina-spacing-2, 0.5rem); /* 6px 8px */
    gap: 0.375rem; /* 6px */
  }

  .ina-time-picker__panel {
    width: 100%;
  }

  .ina-time-picker__input,
  .ina-time-picker--size-sm .ina-time-picker__input,
  .ina-time-picker--size-md .ina-time-picker__input,
  .ina-time-picker--size-lg .ina-time-picker__input {
    font-size: var(--ina-font-xs, 0.75rem) !important;
  }

  .ina-time-picker__prefix-icon,
  .ina-time-picker__suffix-icon {
    width: 18px;
    height: 18px;
  }

  .ina-time-picker__prefix-icon svg,
  .ina-time-picker__suffix-icon svg {
    width: 18px;
    height: 18px;
  }

  .ina-time-picker__actions {
    padding: var(--ina-spacing-2);
  }

  .ina-time-picker__action-button,
  .ina-time-picker__confirm-button {
    font-size: var(--ina-font-xs, 0.75rem);
    padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
  }
}
/* Toast Component Styles */
/* Base container */
.ina-toast-container {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  gap: var(--ina-spacing-2);
  padding: var(--ina-spacing-2);
  max-width: 100vw;
  box-sizing: border-box;
}
/* Position variants */
.ina-toast-container--top-left {
  top: var(--ina-spacing-4);
  left: var(--ina-spacing-4);
  align-items: flex-start;
  flex-direction: column;
}
.ina-toast-container--top-right {
  top: var(--ina-spacing-4);
  right: var(--ina-spacing-4);
  align-items: flex-end;
  flex-direction: column;
}
.ina-toast-container--top-middle {
  top: var(--ina-spacing-4);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column;
}
.ina-toast-container--bottom-left {
  bottom: var(--ina-spacing-4);
  left: var(--ina-spacing-4);
  align-items: flex-start;
  flex-direction: column-reverse;
}
.ina-toast-container--bottom-right {
  bottom: var(--ina-spacing-4);
  right: var(--ina-spacing-4);
  align-items: flex-end;
  flex-direction: column-reverse;
}
.ina-toast-container--bottom-middle {
  bottom: var(--ina-spacing-4);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}
.ina-toast-container--left-middle {
  top: 50%;
  left: var(--ina-spacing-4);
  transform: translateY(-50%);
  align-items: flex-start;
  flex-direction: column;
}
.ina-toast-container--right-middle {
  top: 50%;
  right: var(--ina-spacing-4);
  transform: translateY(-50%);
  align-items: flex-end;
  flex-direction: column;
}
/* Toast item wrapper */
.ina-toast-item {
  pointer-events: none;
}
/* Toast itself */
.ina-toast {
  pointer-events: auto;
  border-radius: var(--ina-radius-lg);
  box-shadow:
    0 12px 16px -4px rgba(10, 13, 18, 0.08),
    0 4px 6px -2px rgba(10, 13, 18, 0.03);
  padding: var(--ina-spacing-4);
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 358px;
  max-width: 100%;
  transition: opacity 300ms ease-in-out;
  background-color: var(--ina-background-primary);
  border: 1px solid var(--ina-stroke-primary);
  color: var(--ina-content-primary);
  min-height: 40px;
  font-weight: 500;
}
/* Toast content */
.ina-toast__content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0; /* Allow content to shrink below content size */
}
.ina-toast__icon {
  margin-right: var(--ina-spacing-2);
  margin-top: 0;
  margin-bottom: 0;
  color: var(--ina-base-white);
}
/* Toast text area */
.ina-toast__text-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* Allow text to shrink below content size */
  overflow-wrap: break-word;
  word-break: break-word;
  margin: 0;
  padding: 0;
}
.ina-toast__title {
  font-size: var(--ina-font-xs);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
.ina-toast__description {
  margin-top: var(--ina-spacing-1);
  margin-bottom: 0;
  padding: 0;
  font-size: var(--ina-font-2xs);
  line-height: 1.4;
}
/* Action area */
.ina-toast__action-area {
  margin-left: var(--ina-spacing-3);
  flex-shrink: 0;
}
/* Close button */
.ina-toast__close-button {
  margin-left: var(--ina-spacing-2);
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: stroke-width var(--ina-transition-base);
}
.ina-toast__close-button:hover {
  stroke-width: 3;
}
.ina-toast__close-icon {
  width: 16px;
  height: 16px;
  color: var(--ina-base-white);
}
/* Style variants */
/* Note: Style variants are handled by state styles below */
/* State styles - Solid (default style) */
.ina-toast--state-default.ina-toast--style-solid {
  background-color: var(--ina-base-black) !important;
  border: 1px solid var(--ina-base-black) !important;
  color: var(--ina-base-white) !important;
}
.ina-toast--state-destructive.ina-toast--style-solid {
  background-color: var(--ina-negative-500) !important;
  border: 1px solid var(--ina-negative-500) !important;
  color: var(--ina-base-white) !important;
}
.ina-toast--state-positive.ina-toast--style-solid {
  background-color: var(--ina-positive-600) !important;
  border: 1px solid var(--ina-positive-600) !important;
  color: var(--ina-base-white) !important;
}
/* State styles - Outline (default style) */
.ina-toast--state-default.ina-toast--style-outline {
  background-color: var(--ina-base-white) !important;
  border: 1px solid var(--ina-base-black) !important;
  color: var(--ina-base-black) !important;
}
.ina-toast--state-destructive.ina-toast--style-outline {
  background-color: var(--ina-negative-50) !important;
  border: 1px solid var(--ina-negative-500) !important;
  color: var(--ina-negative-500) !important;
}
.ina-toast--state-positive.ina-toast--style-outline {
  background-color: var(--ina-positive-50) !important;
  border: 1px solid var(--ina-positive-600) !important;
  color: var(--ina-positive-600) !important;
}
/* Visibility states */
.ina-toast--visible {
  opacity: 1;
}
.ina-toast--hidden {
  opacity: 0;
}
/* Responsive adjustments */
/* Mobile (< 640px) */
@media (max-width: 639px) {
  .ina-toast {
    /* Jika viewport < 358px, gunakan max-width dari viewport untuk mencegah overflow */
    max-width: calc(100vw - var(--ina-spacing-8));
    /* Min-width akan otomatis tidak berlaku jika max-width lebih kecil */
    min-width: min(358px, calc(100vw - var(--ina-spacing-8)));
    padding: var(--ina-spacing-3);
    min-height: 40px;
  }

  .ina-toast__title {
    font-size: var(--ina-font-xs);
  }

  .ina-toast__description {
    font-size: var(--ina-font-2xs);
  }
}
/* Small (>= 640px) */
@media (min-width: 640px) {
  .ina-toast {
    min-height: 48px;
  }

  .ina-toast__title {
    font-size: var(--ina-font-xs);
  }
}
/* Large (>= 1024px) */
@media (min-width: 1024px) {
  .ina-toast {
    min-height: 52px;
  }

  .ina-toast__title {
    font-size: var(--ina-font-sm);
  }
}
/* =========================== */
/* TOGGLE SWITCH STYLES */
/* =========================== */
.ina-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ina-toggle--disabled {
  cursor: not-allowed;
}
/* Hide the actual input but keep it accessible and clickable */
.ina-toggle__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}
/* Track (the background oval) */
.ina-toggle__track {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--ina-background-secondary);
  border-radius: 9999px;
  transition: all var(--ina-transition-duration-200) ease-in-out;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.ina-toggle__track--checked {
  background-color: var(--ina-positive-500);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ina-toggle__track--disabled {
  background-color: var(--ina-background-tertiary, #f2f2f2);
  cursor: not-allowed;
}
.ina-toggle__track--disabled.ina-toggle__track--checked {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
/* Thumb (the sliding circle) */
.ina-toggle__thumb {
  position: absolute;
  background-color: var(--ina-background-primary);
  border-radius: 50%;
  transition: all var(--ina-transition-duration-200) ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  filter: drop-shadow(0 1px 2px rgba(10, 13, 18, 0.06))
    drop-shadow(0 1px 3px rgba(10, 13, 18, 0.1));
}
.ina-toggle__thumb--checked {
  transform: translateX(100%);
}
.ina-toggle__thumb--disabled {
  background-color: var(--ina-background-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Size variants */
/* Small: 36px x 20px */
.ina-toggle--size-sm .ina-toggle__track {
  width: 36px;
  height: 20px;
}
.ina-toggle--size-sm .ina-toggle__thumb {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}
.ina-toggle--size-sm .ina-toggle__thumb--checked {
  transform: translateX(16px);
}
/* Medium: 44px x 24px */
.ina-toggle--size-md .ina-toggle__track {
  width: 44px;
  height: 24px;
}
.ina-toggle--size-md .ina-toggle__thumb {
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
}
.ina-toggle--size-md .ina-toggle__thumb--checked {
  transform: translateX(20px);
}
/* Hover states */
.ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track {
  box-shadow:
    0 0 6px 0 rgba(31, 31, 31, 0.1),
    0 0 4px 6px rgba(31, 31, 31, 0.04);
}
.ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__thumb {
  box-shadow:
    0 0 6px 0 rgba(31, 31, 31, 0.1),
    0 0 4px 6px rgba(31, 31, 31, 0.04);
}
/* Focus states */
/* Focus states */
.ina-toggle:focus-within .ina-toggle__track,
.ina-toggle .ina-toggle__input:focus + .ina-toggle__track,
.ina-toggle .ina-toggle__input:focus:hover + .ina-toggle__track {
  outline: none;
  outline-offset: 0;
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
}
/* Active states */
.ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb {
  transform: scale(0.95);
}
.ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb--checked {
  transform: translateX(20px) scale(0.95);
}
.ina-toggle--size-sm:not(.ina-toggle--disabled):active
  .ina-toggle__thumb--checked {
  transform: translateX(16px) scale(0.95);
}
/* Dark mode */
[data-theme='dark'] .ina-toggle__track {
  background-color: var(--ina-stroke-secondary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme='dark'] .ina-toggle__track--checked {
  background-color: var(--ina-positive-500);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme='dark'] .ina-toggle__track--disabled {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
[data-theme='dark'] .ina-toggle__track--disabled.ina-toggle__track--checked {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
[data-theme='dark'] .ina-toggle__thumb {
  background-color: var(--ina-background-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .ina-toggle__thumb--disabled {
  background-color: var(--ina-background-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
[data-theme='dark']
  .ina-toggle:not(.ina-toggle--disabled):hover
  .ina-toggle__thumb {
  box-shadow:
    0 0 6px 0 rgba(31, 31, 31, 0.1),
    0 0 4px 6px rgba(31, 31, 31, 0.04);
}
[data-theme='dark'] .ina-toggle:focus-within .ina-toggle__track,
[data-theme='dark'] .ina-toggle__input:focus + .ina-toggle__track {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ina-toggle__track,
  .ina-toggle__thumb {
    transition: none;
  }
}
/**
 * Tooltip Test Component Styles - Versi Sederhana
 * Menggunakan CSS murni seperti W3Schools
 * Support force :hover state dari developer tools
 */
/* Base wrapper - sama seperti existing */
.ina-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
/* Tooltip content - hidden by default, shown on hover */
.ina-tooltip__content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 999999;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
/* Show tooltip on hover - support force state dari dev tools */
.ina-tooltip:hover .ina-tooltip__content,
.ina-tooltip[data-hover='true'] .ina-tooltip__content,
.ina-tooltip__content:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Hide tooltip when closed - override hover behavior */
.ina-tooltip--closed .ina-tooltip__content,
.ina-tooltip--closed:hover .ina-tooltip__content {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Basic Tooltip Bubble */
.ina-tooltip__bubble {
  background-color: var(--ina-black);
  color: var(--ina-white);
  text-align: center;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  width: -moz-max-content;
  width: max-content;
  max-width: 320px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Positioning - Top */
.ina-tooltip--placement-top .ina-tooltip__content,
.ina-tooltip--placement-top-start .ina-tooltip__content,
.ina-tooltip--placement-top-end .ina-tooltip__content {
  bottom: calc(100% - 10px);
  margin-bottom: 8px;
}
.ina-tooltip--placement-top .ina-tooltip__content {
  left: 50%;
  transform: translateX(-50%);
}
.ina-tooltip--placement-top-start .ina-tooltip__content {
  left: 0;
}
.ina-tooltip--placement-top-end .ina-tooltip__content {
  right: 0;
}
/* Positioning - Bottom */
.ina-tooltip--placement-bottom .ina-tooltip__content,
.ina-tooltip--placement-bottom-start .ina-tooltip__content,
.ina-tooltip--placement-bottom-end .ina-tooltip__content {
  top: calc(100% - 10px);
  margin-top: 8px;
}
.ina-tooltip--placement-bottom .ina-tooltip__content {
  left: 50%;
  transform: translateX(-50%);
}
.ina-tooltip--placement-bottom-start .ina-tooltip__content {
  left: 0;
}
.ina-tooltip--placement-bottom-end .ina-tooltip__content {
  right: 0;
}
/* Positioning - Left */
.ina-tooltip--placement-left .ina-tooltip__content,
.ina-tooltip--placement-left-start .ina-tooltip__content,
.ina-tooltip--placement-left-end .ina-tooltip__content {
  right: calc(100% - 10px);
  margin-right: 8px;
}
.ina-tooltip--placement-left .ina-tooltip__content {
  top: 50%;
  transform: translateY(-50%);
}
.ina-tooltip--placement-left-start .ina-tooltip__content {
  top: 0;
}
.ina-tooltip--placement-left-end .ina-tooltip__content {
  bottom: 0;
}
/* Positioning - Right */
.ina-tooltip--placement-right .ina-tooltip__content,
.ina-tooltip--placement-right-start .ina-tooltip__content,
.ina-tooltip--placement-right-end .ina-tooltip__content {
  left: calc(100% - 10px);
  margin-left: 8px;
}
.ina-tooltip--placement-right .ina-tooltip__content {
  top: 50%;
  transform: translateY(-50%);
}
.ina-tooltip--placement-right-start .ina-tooltip__content {
  top: 0;
}
.ina-tooltip--placement-right-end .ina-tooltip__content {
  bottom: 0;
}
/* Arrow untuk tooltip - menggunakan ::after */
.ina-tooltip__content--show-arrow::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}
/* Arrow untuk top placement (arrow di bawah, pointing down) */
.ina-tooltip--placement-top .ina-tooltip__content--show-arrow::after,
.ina-tooltip--placement-top-start .ina-tooltip__content--show-arrow::after,
.ina-tooltip--placement-top-end .ina-tooltip__content--show-arrow::after {
  top: 100%;
  border-width: 5px;
  border-color: var(--ina-black) transparent transparent transparent;
}
.ina-tooltip--placement-top .ina-tooltip__content--show-arrow::after {
  left: 50%;
  margin-left: -5px;
}
.ina-tooltip--placement-top-start .ina-tooltip__content--show-arrow::after {
  left: 12px;
}
.ina-tooltip--placement-top-end .ina-tooltip__content--show-arrow::after {
  right: 12px;
}
/* Arrow untuk bottom placement (arrow di atas, pointing up) */
.ina-tooltip--placement-bottom .ina-tooltip__content--show-arrow::after,
.ina-tooltip--placement-bottom-start .ina-tooltip__content--show-arrow::after,
.ina-tooltip--placement-bottom-end .ina-tooltip__content--show-arrow::after {
  bottom: 100%;
  border-width: 5px;
  border-color: transparent transparent var(--ina-black) transparent;
}
.ina-tooltip--placement-bottom .ina-tooltip__content--show-arrow::after {
  left: 50%;
  margin-left: -5px;
}
.ina-tooltip--placement-bottom-start .ina-tooltip__content--show-arrow::after {
  left: 12px;
}
.ina-tooltip--placement-bottom-end .ina-tooltip__content--show-arrow::after {
  right: 12px;
}
/* Arrow untuk left placement (arrow di kanan, pointing right) */
.ina-tooltip--placement-left .ina-tooltip__content--show-arrow::after,
.ina-tooltip--placement-left-start .ina-tooltip__content--show-arrow::after,
.ina-tooltip--placement-left-end .ina-tooltip__content--show-arrow::after {
  left: 100%;
  border-width: 5px;
  border-color: transparent transparent transparent var(--ina-black);
}
.ina-tooltip--placement-left .ina-tooltip__content--show-arrow::after {
  top: 50%;
  margin-top: -5px;
}
.ina-tooltip--placement-left-start .ina-tooltip__content--show-arrow::after {
  top: 12px;
}
.ina-tooltip--placement-left-end .ina-tooltip__content--show-arrow::after {
  bottom: 12px;
}
/* Arrow untuk right placement (arrow di kiri, pointing left) */
.ina-tooltip--placement-right .ina-tooltip__content--show-arrow::after,
.ina-tooltip--placement-right-start .ina-tooltip__content--show-arrow::after,
.ina-tooltip--placement-right-end .ina-tooltip__content--show-arrow::after {
  right: 100%;
  border-width: 5px;
  border-color: transparent var(--ina-black) transparent transparent;
}
.ina-tooltip--placement-right .ina-tooltip__content--show-arrow::after {
  top: 50%;
  margin-top: -5px;
}
.ina-tooltip--placement-right-start .ina-tooltip__content--show-arrow::after {
  top: 12px;
}
.ina-tooltip--placement-right-end .ina-tooltip__content--show-arrow::after {
  bottom: 12px;
}
/* Card Tooltip (Light, Dark, Media) */
.ina-tooltip__card {
  position: relative;
  pointer-events: auto;
  border-radius: 8px;
  box-shadow:
    0 12px 16px -4px rgba(10, 13, 18, 0.08),
    0 4px 6px -2px rgba(10, 13, 18, 0.03);
  overflow: hidden;
  width: 320px;
  display: flex;
  flex-direction: column;
  background-color: var(--ina-white);
  color: var(--ina-content-primary);
}
.ina-tooltip__card--light {
  background-color: var(--ina-white);
  color: var(--ina-content-primary);
}
.ina-tooltip__card--dark {
  background-color: var(--ina-content-primary);
  color: var(--ina-white);
}
.ina-tooltip__card--media {
  background-color: var(--ina-white);
  color: var(--ina-content-primary);
}
/* Close button */
.ina-tooltip__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
  color: var(--ina-content-primary);
  padding: 0;
}
.ina-tooltip__close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.ina-tooltip__card--dark .ina-tooltip__close {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--ina-white);
}
.ina-tooltip__card--dark .ina-tooltip__close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.ina-tooltip__close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
/* Image section (for media variant) */
.ina-tooltip__image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: var(--ina-background-tertiary, #f2f2f2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ina-tooltip__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Content section */
.ina-tooltip__content-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ina-tooltip__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ina-content-primary);
  margin: 0;
}
.ina-tooltip__card--dark .ina-tooltip__title {
  color: var(--ina-white);
}
.ina-tooltip__description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--ina-content-secondary);
  margin: 0;
}
.ina-tooltip__card--dark .ina-tooltip__description {
  color: rgba(255, 255, 255, 0.7);
}
/* Action buttons */
.ina-tooltip__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.ina-tooltip__action {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ina-tooltip__action--close {
  background-color: var(--ina-white);
  color: var(--ina-content-primary);
  border: 1px solid #e0e0e0;
}
.ina-tooltip__action--close:hover {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
.ina-tooltip__action--next {
  background-color: var(--ina-primary-primary);
  color: var(--ina-white);
}
.ina-tooltip__action--next:hover {
  background-color: var(--ina-primary-700);
}
.ina-tooltip__card--dark .ina-tooltip__action--close {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--ina-white);
  border-color: rgba(255, 255, 255, 0.2);
}
.ina-tooltip__card--dark .ina-tooltip__action--close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
/* Arrow colors untuk card variant */
.ina-tooltip--placement-top .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-top .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after,
.ina-tooltip--placement-top-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-top-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after,
.ina-tooltip--placement-top-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-top-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
  border-top-color: var(--ina-white);
}
.ina-tooltip--placement-top .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after,
.ina-tooltip--placement-top-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after,
.ina-tooltip--placement-top-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
  border-top-color: var(--ina-content-primary);
}
.ina-tooltip--placement-bottom .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-bottom .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after,
.ina-tooltip--placement-bottom-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-bottom-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after,
.ina-tooltip--placement-bottom-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-bottom-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
  border-bottom-color: var(--ina-white);
}
.ina-tooltip--placement-bottom .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after,
.ina-tooltip--placement-bottom-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after,
.ina-tooltip--placement-bottom-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
  border-bottom-color: var(--ina-content-primary);
}
.ina-tooltip--placement-left .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-left .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after,
.ina-tooltip--placement-left-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-left-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after,
.ina-tooltip--placement-left-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-left-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
  border-left-color: var(--ina-white);
}
.ina-tooltip--placement-left .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after,
.ina-tooltip--placement-left-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after,
.ina-tooltip--placement-left-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
  border-left-color: var(--ina-content-primary);
}
.ina-tooltip--placement-right .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-right .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after,
.ina-tooltip--placement-right-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-right-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after,
.ina-tooltip--placement-right-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after,
.ina-tooltip--placement-right-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
  border-right-color: var(--ina-white);
}
.ina-tooltip--placement-right .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after,
.ina-tooltip--placement-right-start .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after,
.ina-tooltip--placement-right-end .ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
  border-right-color: var(--ina-content-primary);
}
/* =========================== */
/* YEAR PICKER STYLES          */
/* =========================== */
.ina-year-picker {
  position: relative;
  display: inline-block;
}
/* Trigger Button */
.ina-year-picker__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ina-spacing-2) var(--ina-spacing-3);
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-lg);
  background-color: var(--ina-background-primary);
  color: var(--ina-content-primary);
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-semibold, 600);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
  width: -moz-fit-content;
  width: fit-content;
  min-width: 40px;
  gap: var(--ina-spacing-2);
}
.ina-year-picker__trigger--size-sm {
  height: 32px;
  min-width: 50px;
}
.ina-year-picker__trigger--size-md {
  height: 36px;
}
/* Desktop >= 768px */
@media (min-width: 768px) {
  .ina-year-picker__trigger {
    padding: var(--ina-spacing-2) var(--ina-spacing-4);
  }
  .ina-year-picker__trigger-md {
    height: 44px;
  }
}
.ina-year-picker__trigger:hover {
  background-color: var(--ina-background-secondary);
}
.ina-year-picker__trigger:focus {
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #fff),
    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
  outline: none;
  background-color: var(--ina-background-primary, #ffffff);
  border-color: var(--ina-stroke-tertiary, #141414);
}
.ina-year-picker__trigger--disabled {
  background-color: var(--ina-background-secondary);
  color: var(--ina-content-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}
.ina-year-picker__trigger--disabled:hover {
  background-color: var(--ina-background-secondary);
  border-color: var(--ina-stroke-primary);
}
.ina-year-picker__trigger--readonly {
  background-color: var(--ina-background-secondary);
  cursor: default;
}
.ina-year-picker__trigger--readonly:hover {
  background-color: var(--ina-background-secondary);
  border-color: var(--ina-stroke-primary);
}
/* Trigger Text */
.ina-year-picker__trigger-text {
  flex: 1;
  text-align: left;
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: inherit;
}
/* Icon */
.ina-year-picker__icon {
  flex-shrink: 0;
  color: var(--ina-content-secondary);
}
/* Chevron */
.ina-year-picker__chevron {
  flex-shrink: 0;
  color: var(--ina-content-secondary);
  transition: transform var(--ina-transition-fast);
}
.ina-year-picker__chevron--open {
  transform: rotate(180deg);
}
/* Clear Button */
.ina-year-picker__clear-button {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ina-content-secondary);
  transition: color var(--ina-transition-base);
}
.ina-year-picker__clear-button:hover:not(:disabled) {
  color: var(--ina-content-secondary);
}
.ina-year-picker__clear-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ina-year-picker__clear-icon {
  width: 16px;
  height: 16px;
}
/* =========================== */
/* DESKTOP PANEL               */
/* =========================== */
/* Panel - Desktop only */
.ina-year-picker__panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--ina-spacing-1);
  background-color: var(
    --ina-background-primary
  ) !important; /* Ensure solid background */
  border: 1px solid var(--ina-stroke-primary);
  border-radius: var(--ina-radius-xl);
  box-shadow: var(--ina-shadow-lg);
  z-index: 10006; /* Higher than MonthPicker panel (10005) and DatePicker panel (10004) */
  width: 320px;
  max-width: calc(
    100vw - 16px
  ); /* Ensure panel doesn't exceed viewport width */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ina-transition-fast);
  /* Ensure panel is not clipped by parent containers */
  max-height: 400px;
  overflow-y: auto;
  /* Ensure panel content is solid */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ina-year-picker__panel--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Right-aligned panel positioning */
.ina-year-picker__panel--right-aligned {
  left: auto !important;
  right: 0 !important;
}
/* Header */
.ina-year-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ina-spacing-4, 16px);
  border-bottom: 1px solid var(--ina-stroke-primary);
}
/* Navigation Buttons */
.ina-year-picker__nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--ina-content-primary);
  border: none;
  border-radius: var(--ina-radius-base);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
  font-size: var(--ina-font-lg, 18px);
}
@media screen and (max-width: 639px) {
  .ina-year-picker__nav-button {
    font-size: var(--ina-font-sm);
    width: 28px;
    height: 28px;
  }
}
@media screen and (min-width: 768px) {
  .ina-year-picker__nav-button {
    font-size: var(--ina-font-base);
  }
}
.ina-year-picker__nav-button:hover:not(:disabled) {
  background-color: var(--ina-background-secondary);
}
.ina-year-picker__nav-button:focus-visible:not(:disabled),
.ina-year-picker__nav-button:focus:not(:disabled) {
  background-color: var(--ina-background-secondary);
  border: 2px solid var(--ina-neutral-600, #525252);
}
.ina-year-picker__nav-button:disabled {
  color: var(--ina-content-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}
.ina-year-picker__nav-icon {
  width: 24px;
  height: 24px;
}
/* Decade Range */
.ina-year-picker__decade-range {
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary);
  text-align: center;
  flex: 1;
}
/* Year Grid */
.ina-year-picker__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ina-spacing-1);
  background-color: var(--ina-background-primary);
  padding: var(--ina-spacing-4);
  border-radius: var(--ina-radius-base);
}
/* Year Options */
.ina-year-picker__year-option {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ina-font-xs);
  font-weight: var(--ina-font-medium);
  color: var(--ina-content-primary, #1f1f1f);
  background-color: var(--ina-white);
  border: 1px solid var(--ina-border-light);
  border-radius: var(--ina-radius-lg);
  cursor: pointer;
  transition: all var(--ina-transition-fast);
  min-height: 40px;
  max-width: 50px;
}
.ina-year-picker__year-option:hover:not(:disabled):not(
    .ina-year-picker__year-option--selected
  ) {
  background-color: var(--ina-background-secondary);
}
.ina-year-picker__year-option:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
  z-index: 1;
}
.ina-year-picker__year-option.ina-year-picker__year-option--selected,
.ina-year-picker__year-option.ina-year-picker__year-option--selected:hover {
  background-color: var(--ina-primary-primary, #1f1f1f);
  color: var(--ina-base-white, #ffffff);
  font-weight: var(--ina-font-medium);
}
.ina-year-picker__year-option--hovered:not(
  .ina-year-picker__year-option--selected
) {
  background-color: var(--ina-background-tertiary, #f2f2f2);
}
.ina-year-picker__year-option:disabled {
  color: var(--ina-content-tertiary);
  cursor: not-allowed;
  opacity: 0.8;
}
.ina-year-picker__year-option--disabled {
  color: var(--ina-content-tertiary);
  cursor: not-allowed;
  opacity: 0.4;
  background-color: var(--ina-background-secondary);
}
.ina-year-picker__year-option--disabled:hover {
  background-color: var(--ina-background-secondary);
  opacity: 0.4;
}
/* =========================== */
/* DARK MODE SUPPORT           */
/* =========================== */
[data-theme='dark'] .ina-year-picker__trigger {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-stroke-primary);
  color: var(--ina-content-primary);
}
[data-theme='dark'] .ina-year-picker__panel {
  background-color: var(--ina-background-primary);
  border-color: var(--ina-stroke-primary);
  box-shadow: var(--ina-shadow-lg);
}
[data-theme='dark'] .ina-year-picker__header {
  border-bottom-color: var(--ina-stroke-primary);
}
[data-theme='dark'] .ina-year-picker__nav-button {
  color: var(--ina-content-primary);
}
[data-theme='dark'] .ina-year-picker__decade-range {
  color: var(--ina-content-primary);
}
[data-theme='dark'] .ina-year-picker__year-option--disabled {
  color: var(--ina-content-tertiary);
  opacity: 0.4;
  background-color: var(--ina-background-secondary);
}
[data-theme='dark'] .ina-year-picker__year-option--disabled:hover {
  background-color: var(--ina-background-secondary);
  opacity: 0.4;
}
/* =========================== */
/* RESPONSIVE DESIGN           */
/* =========================== */
/* Mobile adjustments */
@media (max-width: 639px) {
  .ina-year-picker__panel {
    /* Center panel horizontally in viewport */
    width: calc(100vw - 2rem) !important;
    max-width: 164px !important;
    /* Ensure panel doesn't exceed viewport */
    padding: var(--ina-spacing-1);
  }

  .ina-year-picker__header {
    padding: var(--ina-spacing-2) var(--ina-spacing-0);
    margin-bottom: var(--ina-spacing-1);
  }

  .ina-year-picker__nav-button {
    width: 28px;
    height: 28px;
    padding: 0px;
  }

  .ina-year-picker__decade-range {
    font-size: var(--ina-font-xs);
  }

  .ina-year-picker__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ina-spacing-0-5);
    padding: var(--ina-spacing-1);
  }

  .ina-year-picker__year-option {
    min-height: 30px;
    font-size: var(--ina-font-xs);
    padding: var(--ina-spacing-0-5);
    border-radius: var(--ina-radius-base);
  }
}