/* ==========================================================================
   Rabot Tools — Shared Styles
   Mirrors the Rabot Portal design system (apps/portal/src/App.css)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   CSS Variables — copied from apps/portal/src/App.css
   -------------------------------------------------------------------------- */
:root {
  /* Base */
  --base-white: #ffffff;
  --base-black: #000000;
  --base-action-container: #EFF1FA;

  /* Gray */
  --gray-25: #F5F5F5;
  --gray-50: #EBEBEB;
  --gray-75: #DBDBDB;
  --gray-100: #C4C4C4;
  --gray-200: #B3B3B3;
  --gray-300: #A3A3A3;
  --gray-400: #9B9B9B;
  --gray-500: #7B7B7B;
  --gray-600: #666666;
  --gray-700: #3D3D3D;
  --gray-800: #292929;
  --gray-900: #191919;

  /* GrayBlue */
  --grayBlue-25: #F2F3F5;
  --grayBlue-50: #D8DCE5;
  --grayBlue-75: #BCC2CF;
  --grayBlue-100: #A9AEB8;
  --grayBlue-200: #9AA0AC;
  --grayBlue-300: #878F9F;
  --grayBlue-400: #79859E;
  --grayBlue-500: #667085;
  --grayBlue-600: #4F5768;
  --grayBlue-700: #3F4757;
  --grayBlue-800: #272A30;
  --grayBlue-900: #1B1D21;

  /* Primary */
  --primary-25: #F0EDFB;
  --primary-50: #D8D2F4;
  --primary-100: #C5BAF5;
  --primary-200: #9481E6;
  --primary-300: #7C66E1;
  --primary-400: #654ADC;
  --primary-500: #4D2ED6;
  --primary-600: #4628CC;
  --primary-700: #4025BA;
  --primary-800: #3B22AD;
  --primary-900: #25156B;

  /* Success */
  --success-25: #F3FEF4;
  --success-50: #D1FAE1;
  --success-100: #A5F5C5;
  --success-200: #6DF0A2;
  --success-300: #4CED8D;
  --success-400: #2AEA77;
  --success-500: #16D965;
  --success-600: #13B855;
  --success-700: #0F9545;
  --success-800: #0C7536;
  --success-900: #085427;

  /* Warning */
  --warning-25: #FFF8EB;
  --warning-50: #F8E2BC;
  --warning-100: #FBD287;
  --warning-200: #F9B741;
  --warning-300: #F8AA1E;
  --warning-400: #EAA01B;
  --warning-500: #E09818;
  --warning-600: #CB8A16;
  --warning-700: #B57C14;
  --warning-800: #A06D11;
  --warning-900: #8B5F0F;

  /* Error */
  --error-25: #FCEEEF;
  --error-50: #F7D4D6;
  --error-100: #F3BCC0;
  --error-200: #EB8E94;
  --error-300: #E6767E;
  --error-400: #F5545F;
  --error-500: #EA2A37;
  --error-600: #D42632;
  --error-700: #B2202A;
  --error-800: #9C1C25;
  --error-900: #6A151B;

  /* Shadows & Animation */
  --rabot-animation-func: cubic-bezier(0.465, 0.183, 0.153, 0.946);
  --shadow-subtle: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-small: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0px 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.15);
  --rabot-box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.2);
  --gutter: 16px;
}

/* --------------------------------------------------------------------------
   Base / Body
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
  background: #F2F2F2;
}

/* --------------------------------------------------------------------------
   Navigation (injected by nav.js)
   -------------------------------------------------------------------------- */
.tools-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  background: var(--base-white);
  border-bottom: 1px solid var(--gray-50);
  box-shadow: var(--shadow-subtle);
}

.tools-nav .nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.tools-nav .nav-logo {
  height: 22px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.tools-footer {
  padding: 24px;
  text-align: center;
  color: var(--gray-500);
  font-size: 12px;
  margin-top: 48px;
}

.tools-footer a {
  color: var(--primary-600);
  text-decoration: none;
}

.tools-footer a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.tools-layout {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* --------------------------------------------------------------------------
   Cards — matches RabotCard (shadow variant)
   -------------------------------------------------------------------------- */
.tools-card {
  display: flex;
  padding: var(--gutter);
  flex-direction: column;
  gap: 16px;
  border-radius: 12px;
  background: var(--base-white);
  transition: all 0.3s var(--rabot-animation-func);
  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.tools-card:hover {
  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.08);
}

a.tools-card {
  text-decoration: none;
  color: var(--gray-700);
  cursor: pointer;
}

a.tools-card:hover {
  transform: translateY(-2px);
}

a.tools-card:active {
  transform: translateY(0);
}

.tools-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.tools-card p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.5;
}

.tools-card .card-icon {
  font-size: 28px;
  margin-bottom: 4px;
  display: block;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Buttons — matches RabotButton
   -------------------------------------------------------------------------- */
.btn {
  font-family: 'Inter', sans-serif;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid;
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  font-weight: 600;
  line-height: 24px;
  user-select: none;
  transition: all 0.1s var(--rabot-animation-func);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--rabot-box-shadow);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-small);
}

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

.btn-lg { padding: 12px 20px; font-size: 16px; }
.btn-md { padding: 8px 20px; font-size: 16px; }
.btn-sm { padding: 4px 16px; font-size: 14px; }

.btn-primary {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--base-white);
}

.btn-primary:hover {
  background: var(--primary-800);
  border-color: var(--primary-800);
}

.btn-primary:focus {
  background: var(--primary-700);
  border-color: var(--primary-700);
  box-shadow: 0px 0px 0px 4px rgba(167, 151, 241, 0.50);
}

.btn-primary:disabled {
  background: #EAEBED;
  border-color: #EAEBED;
  color: var(--gray-100);
  box-shadow: none;
}

.btn-tertiary {
  border-color: #EDEDED;
  background: transparent;
  color: var(--gray-800);
}

.btn-tertiary:hover {
  background: #F8F9FA;
  border-color: #EDEDED;
}

.btn-tertiary:focus {
  background: var(--base-white);
  border-color: #EDEDED;
  box-shadow: 0px 0px 0px 4px rgba(243, 244, 245, 0.80), var(--shadow-subtle);
}

.btn-tertiary:disabled {
  background: #EAEBED;
  border-color: #EAEBED;
  color: var(--gray-100);
  box-shadow: none;
}

.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--primary-600);
  box-shadow: none;
  padding: 0;
}

.btn-link:hover {
  color: var(--primary-800);
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   Inputs — matches RabotInputText
   -------------------------------------------------------------------------- */
.input-label {
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.input-field {
  display: flex;
  position: relative;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  background: var(--base-white);
  box-shadow: var(--shadow-subtle);
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--gray-900);
  outline: none;
  transition: all 0.1s var(--rabot-animation-func);
}

.input-field:focus {
  border-color: #EDEDED;
  box-shadow: var(--shadow-subtle), 0px 0px 0px 4px rgba(70, 40, 204, 0.10);
}

.input-field:disabled {
  cursor: not-allowed;
  background: #EDEDED;
  border-color: #EDEDED;
  color: #ACACAC;
}

.input-field::placeholder {
  color: var(--gray-400);
}

select.input-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237B7B7B' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* --------------------------------------------------------------------------
   Chips — matches RabotChip
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  padding: 4px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 24px;
  height: 28px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.1s var(--rabot-animation-func);
}

.chip-green { background: #DFF5E8; color: #2ABB64; }
.chip-red { background: var(--error-25); color: var(--error-500); }
.chip-blue { background: #E7F0FF; color: #4689EE; }
.chip-purple { background: #F5E6FF; color: #A566FF; }

/* --------------------------------------------------------------------------
   Note/Callout box
   -------------------------------------------------------------------------- */
.note-box {
  background: var(--primary-25);
  border: 1px solid var(--primary-100);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
}

.note-box strong {
  color: var(--primary-600);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.breadcrumb a {
  color: var(--primary-600);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Back link
   -------------------------------------------------------------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-600);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  transition: color 0.1s var(--rabot-animation-func);
}

.back-link:hover {
  color: var(--primary-800);
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes slide-up {
  0% {
    transform: translateY(10%) scale(0.99);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.animate-in {
  opacity: 0;
  animation: slide-up 0.3s var(--rabot-animation-func) forwards;
}

.tools-grid .tools-card:nth-child(1) { animation-delay: 0ms; }
.tools-grid .tools-card:nth-child(2) { animation-delay: 60ms; }
.tools-grid .tools-card:nth-child(3) { animation-delay: 120ms; }
.tools-grid .tools-card:nth-child(4) { animation-delay: 180ms; }
.tools-grid .tools-card:nth-child(5) { animation-delay: 240ms; }
.tools-grid .tools-card:nth-child(6) { animation-delay: 300ms; }