/* ==========================================================================
   AmoebaX Accounting theme  -  light + dark
   Brand: teal #00e6b8 -> violet #8b7cff, near-black #07080a, Geist.
   Strategy: re-colour Frappe's own design tokens (--gray-*, --blue-*, --surface-*)
   so every built-in component follows, then add a few brand components on top.
   ========================================================================== */

@font-face {
  font-family: "Geist AX";
  src: url("/assets/amoebax_theme/fonts/Geist-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ax-teal: #00e6b8;
  --ax-teal-deep: #007a66;
  --ax-violet: #8b7cff;
  --ax-ink: #07080a;
  --ax-grad: linear-gradient(135deg, #00e6b8 0%, #5fb4e0 52%, #8b7cff 100%);
  --ax-grad-soft: linear-gradient(135deg, rgba(0, 230, 184, 0.16), rgba(139, 124, 255, 0.16));
  --ax-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   LIGHT tokens
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --font-stack: "Geist AX", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gray-50: #f7f8fb;
  --gray-100: #f0f2f7;
  --gray-200: #e6e9f0;
  --gray-300: #d8dce6;
  --gray-400: #c0c6d4;
  --gray-500: #98a0b3;
  --gray-600: #6c7488;
  --gray-700: #4b5266;
  --gray-800: #2e3445;
  --gray-900: #171b27;
  --gray-950: #0c0f17;

  /* "blue" is Frappe's info/link/selection hue -> AmoebaX teal */
  --blue-50: #e6fbf6;
  --blue-100: #c8f6ec;
  --blue-200: #9aecdb;
  --blue-300: #5fdcc4;
  --blue-400: #1fc7aa;
  --blue-500: #00a98e;
  --blue-600: #008a74;
  --blue-700: #006e5d;
  --blue-800: #00574a;
  --blue-900: #00433a;
  --blue-950: #002b25;

  --primary: #0c0f17;
  --ink-blue-link: #007a66;

  --radius: 9px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --focus-default: 0 0 0 3px rgba(0, 230, 184, 0.30);
  --focus-outline-default: 3px solid rgba(0, 230, 184, 0.35);
  --focus-blue: 0 0 0 3px rgba(0, 230, 184, 0.30);
  --focus-outline-blue: 3px solid rgba(0, 230, 184, 0.35);

  --ax-card-shadow: 0 1px 2px rgba(12, 15, 23, 0.04), 0 4px 16px rgba(12, 15, 23, 0.04);
  --ax-hairline: rgba(12, 15, 23, 0.08);
}

/* --------------------------------------------------------------------------
   DARK tokens - near-black with a cool tint, matches the AmoebaX site
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --gray-50: #f4f6fa;
  --gray-100: #dde1ea;
  --gray-200: #b6bcca;
  --gray-300: #979eb0;
  --gray-400: #7b8296;
  --gray-450: #4d5468;
  --gray-500: #353a4a;
  --gray-600: #282c39;
  --gray-700: #1d2029;
  --gray-800: #161922;
  --gray-900: #10131a;
  --gray-950: #0a0b10;

  --blue-50: #c9fbef;
  --blue-100: #a0f5e1;
  --blue-200: #6aead0;
  --blue-300: #2fd9b9;
  --blue-400: #17b898;
  --blue-500: #0f9a7f;
  --blue-600: #0c7a66;
  --blue-700: #0a5f50;
  --blue-800: #084a3f;
  --blue-900: #073a32;
  --blue-950: #062520;

  --ink-blue-link: #34e8c3;
  --text-neutral: var(--gray-50);

  --focus-default: 0 0 0 3px rgba(0, 230, 184, 0.28);
  --focus-outline-default: 3px solid rgba(0, 230, 184, 0.30);
  --focus-blue: 0 0 0 3px rgba(0, 230, 184, 0.28);
  --focus-outline-blue: 3px solid rgba(0, 230, 184, 0.30);

  --shadow-base: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.35);
  --ax-card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --ax-hairline: rgba(255, 255, 255, 0.08);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Typography - Geist, tabular figures so money lines up in every column
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
  font-family: var(--font-stack);
}

body {
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

[data-fieldtype="Currency"] input,
[data-fieldtype="Float"] input,
[data-fieldtype="Int"] input,
[data-fieldtype="Percent"] input,
.list-row .level-right,
.dt-cell__content--col-Currency,
.dt-cell__content--col-Float,
.dt-cell__content--col-Int,
.grid-static-col.text-right,
.form-dashboard,
.report-summary,
.number-card,
.datatable .dt-cell__content {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, .page-title .title-text {
  letter-spacing: -0.015em;
}

::selection {
  background: rgba(0, 230, 184, 0.28);
}

/* --------------------------------------------------------------------------
   Primary actions - the AmoebaX gradient
   -------------------------------------------------------------------------- */
.es-button[data-variant="solid"],
.es-button.primary-action,
.btn-primary,
.btn.btn-primary-dark {
  background-image: var(--ax-grad);
  background-color: var(--ax-teal);
  color: #04110e;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 4px 14px -4px rgba(0, 230, 184, 0.45);
  transition: filter 0.18s var(--ax-ease), transform 0.18s var(--ax-ease), box-shadow 0.18s var(--ax-ease);
}

.es-button[data-variant="solid"]:hover,
.es-button.primary-action:hover,
.btn-primary:hover {
  background-image: var(--ax-grad);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 6px 18px -4px rgba(0, 230, 184, 0.55);
}

.es-button[data-variant="solid"]:active,
.es-button.primary-action:active,
.btn-primary:active {
  transform: translateY(1px);
  filter: brightness(0.98);
}

.es-button[data-variant="solid"] .icon,
.es-button.primary-action .icon,
.btn-primary .icon {
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
[data-theme="dark"] body {
  background:
    radial-gradient(900px 520px at 6% -8%, rgba(0, 230, 184, 0.055), transparent 62%),
    radial-gradient(760px 480px at 100% -4%, rgba(139, 124, 255, 0.07), transparent 60%),
    var(--surface-base);
  background-attachment: fixed;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .popover {
  border: 1px solid var(--ax-hairline);
  box-shadow: var(--shadow-base);
}

.modal-content,
.dropdown-menu {
  border-radius: var(--radius-lg);
}

/* progress bars carry the brand gradient */
.progress-bar {
  background-image: var(--ax-grad);
}

/* --------------------------------------------------------------------------
   Software-by-AmoebaX credit (injected by amoebax.js)
   -------------------------------------------------------------------------- */
.ax-credit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 12px;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--ink-gray-5);
  background: var(--ax-grad-soft);
  user-select: none;
}
.ax-credit img {
  width: 16px;
  height: 16px;
  flex: none;
}
.ax-credit b {
  color: var(--ink-gray-8);
  font-weight: 600;
}

/* theme toggle (rail) */
.ax-theme-toggle .icon {
  transition: transform 0.35s var(--ax-ease);
}
.ax-theme-toggle:hover .icon {
  transform: rotate(18deg) scale(1.08);
}

/* ==========================================================================
   LOGIN / website pages  -  always the dark, atmospheric AmoebaX look
   ========================================================================== */
body[data-path="login"],
body[data-path="update-password"],
body[data-path="signup"] {
  min-height: 100vh;
  background: #07080a;
  color: #e8eaf0;
  overflow-x: hidden;
}

body[data-path="login"]::before,
body[data-path="login"]::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
  animation: ax-blob 22s ease-in-out infinite alternate;
}
body[data-path="login"]::before {
  width: 46vw;
  height: 46vw;
  left: -12vw;
  top: -14vw;
  background: radial-gradient(circle at 35% 35%, #00e6b8, rgba(0, 230, 184, 0) 70%);
}
body[data-path="login"]::after {
  width: 42vw;
  height: 42vw;
  right: -10vw;
  bottom: -16vw;
  background: radial-gradient(circle at 60% 55%, #8b7cff, rgba(139, 124, 255, 0) 70%);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

@keyframes ax-blob {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; }
  50% { transform: translate3d(4vw, 3vw, 0) rotate(40deg) scale(1.08); border-radius: 42% 58% 46% 54% / 56% 44% 56% 44%; }
  100% { transform: translate3d(-3vw, 5vw, 0) rotate(-25deg) scale(0.96); border-radius: 52% 48% 60% 40% / 44% 58% 42% 56%; }
}

body[data-path="login"] #page-login,
body[data-path="login"] .page-content-wrapper {
  position: relative;
  z-index: 1;
  background: transparent;
}

body[data-path="login"] .for-login,
body[data-path="login"] .login-content {
  background: transparent;
}

body[data-path="login"] .login-content.page-card {
  position: relative;
  z-index: 1;
  max-width: 400px;
  margin: 9vh auto 0;
  padding: 34px 32px 30px;
  border-radius: 22px;
  background: rgba(16, 19, 26, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

body[data-path="login"] .page-card-head {
  align-items: center !important;
  text-align: center !important;
}

body[data-path="login"] img.app-logo {
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

body[data-path="login"] h4,
body[data-path="login"] .page-card-head-text h4 {
  color: #f4f6fa !important;
  text-align: center;
  letter-spacing: -0.02em;
}
body[data-path="login"] .page-card-subtitle,
body[data-path="login"] .page-card-head-text p {
  color: #98a0b3 !important;
  text-align: center;
}

body[data-path="login"] label {
  color: #98a0b3 !important;
}

body[data-path="login"] .form-control {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #f4f6fa;
  border-radius: 10px;
  height: 40px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
body[data-path="login"] .form-control::placeholder {
  color: #6c7488;
}
body[data-path="login"] .form-control:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(0, 230, 184, 0.65);
  box-shadow: 0 0 0 3px rgba(0, 230, 184, 0.18);
  color: #fff;
}
body[data-path="login"] .toggle-password {
  stroke: #98a0b3;
}
body[data-path="login"] a {
  color: #34e8c3;
}

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary,
body[data-path="login"] .page-card .btn-primary {
  height: 42px;
  border-radius: 11px;
  background-image: var(--ax-grad);
  color: #04110e;
  font-weight: 600;
  border: 0;
}
body[data-path="login"] .btn-default,
body[data-path="login"] .btn-login-option {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #e8eaf0;
  border-radius: 11px;
  height: 40px;
}
body[data-path="login"] .btn-default:hover,
body[data-path="login"] .btn-login-option:hover {
  background: rgba(255, 255, 255, 0.10);
}

.ax-login-credit {
  position: relative;
  z-index: 1;
  margin: 22px auto 0;
  text-align: center;
  font-size: 12px;
  color: #6c7488;
  letter-spacing: 0.01em;
}
.ax-login-credit b {
  color: #98a0b3;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  body[data-path="login"]::before,
  body[data-path="login"]::after {
    animation: none;
  }
}

/* ==========================================================================
   Desk components (class names verified against Frappe v16)
   ========================================================================== */

/* Desktop / apps screen: tile labels may wrap to two lines instead of being cut off */
.desktop-icon .icon-caption {
  width: 116px;
  max-width: 116px;
  margin-left: auto;
  margin-right: auto;
}
.desktop-icon .icon-caption .icon-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  width: auto !important;
  max-width: 116px !important;
  text-align: center;
  line-height: 1.25;
}
.desktop-icon .icon-container,
.desktop-icon .app-icon {
  border-radius: 16px;
}
.desktop-icon .icon-container {
  transition: transform 0.25s var(--ax-ease), filter 0.25s var(--ax-ease);
}
.desktop-icon:hover .icon-container {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 18px rgba(0, 230, 184, 0.22));
}

/* Rail: active app icon */
.dock-item.active {
  background: var(--ax-grad-soft);
  box-shadow: inset 0 0 0 1px rgba(0, 230, 184, 0.28);
}

/* Sidebar: active workspace item gets the brand accent bar */
.body-sidebar .standard-sidebar-item.active-sidebar {
  position: relative;
  background: var(--ax-grad-soft);
  box-shadow: inset 0 0 0 1px rgba(0, 230, 184, 0.22);
}
.body-sidebar .standard-sidebar-item.active-sidebar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ax-grad);
}

/* Page header: soft brand hairline */
.page-head {
  border-bottom-color: var(--ax-hairline);
}
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 230, 184, 0.55) 30%, rgba(139, 124, 255, 0.55) 70%, transparent 100%);
  opacity: 0.6;
}

/* Status indicators / badges read crisper with Geist */
.indicator-pill,
.indicator-pill-right {
  font-weight: 560;
  letter-spacing: 0.005em;
}

/* Cards (workspace shortcuts, number cards, dashboard charts) */
.widget,
.number-card,
.frappe-card,
.form-dashboard {
  border-radius: var(--radius-lg);
}
[data-theme="dark"] .widget,
[data-theme="dark"] .number-card {
  box-shadow: var(--ax-card-shadow);
}

/* ==========================================================================
   Login inputs: Frappe's login.bundle.css loads AFTER this file and styles
   `.for-login .page-card .page-card-body input[type=..]`, so match that
   specificity (plus !important) to keep the dark glass fields.
   ========================================================================== */
body[data-path="login"] .for-login .page-card .page-card-body input.form-control,
body[data-path="login"] .for-login .page-card .page-card-body input[type="text"],
body[data-path="login"] .for-login .page-card .page-card-body input[type="email"],
body[data-path="login"] .for-login .page-card .page-card-body input[type="password"] {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #f4f6fa !important;
  -webkit-text-fill-color: #f4f6fa;
  border-radius: 10px;
  height: 40px;
  box-shadow: none;
}
body[data-path="login"] .for-login .page-card .page-card-body input.form-control:focus,
body[data-path="login"] .for-login .page-card .page-card-body input[type="text"]:focus,
body[data-path="login"] .for-login .page-card .page-card-body input[type="email"]:focus,
body[data-path="login"] .for-login .page-card .page-card-body input[type="password"]:focus {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(0, 230, 184, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(0, 230, 184, 0.18);
}
/* browser autofill would otherwise paint the field pale yellow/white */
body[data-path="login"] input:-webkit-autofill,
body[data-path="login"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #151922 inset !important;
  -webkit-text-fill-color: #f4f6fa !important;
  caret-color: #f4f6fa;
}
body[data-path="login"] .for-login .page-card .page-card-body input::placeholder {
  color: #6c7488 !important;
  -webkit-text-fill-color: #6c7488;
}