/* FinSadiq theme for the Frappe v16 desk and login/website.
   Palette, fonts and radius mirror the web app (packages/ui/src/tokens.css).
   Overrides only Frappe's own custom properties plus a few selectors for things
   Frappe hard-codes (links, input focus, hover). Loaded after Frappe's CSS. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700&display=swap");

:root,
[data-theme="light"] {
  --fs-50: #F6F1FB; --fs-100: #ECE1F7; --fs-200: #D8C3EE; --fs-300: #B994DE; --fs-400: #9360C9;
  --fs-500: #6B2FAE; --fs-600: #4B0082; --fs-700: #3E006C; --fs-800: #320057; --fs-900: #250041;
  --fs-ink: #151516;
  --fs-font-heading: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --primary: var(--fs-600);
  --primary-color: var(--fs-600);
  --brand-color: var(--fs-600);
  --btn-primary: var(--fs-600);
  --fs-btn-primary-hover: var(--fs-700);
  --fs-on-primary: #fff;
  --fs-link: var(--fs-600);
  --sidebar-select-color: var(--fs-50);
  --fs-sidebar-active-fg: var(--fs-700);
  --progress-bar-bg: var(--fs-600);
  --checkbox-color: #fff;
  --date-active-bg: var(--fs-600);
  --date-active-text: #fff;
  --focus-default: 0 0 0 3px rgba(75, 0, 130, 0.28);
  --focus-outline-default: 2px solid rgba(75, 0, 130, 0.45);
  --focus-violet: var(--focus-default);
  --fs-heading: var(--fs-ink);
  --heading-color: var(--fs-ink);

  /* Frappe radius scale -> app radius (8px controls, 12px cards) */
  --border-radius: 8px;
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 12px;
  --radius: 8px;
}

[data-theme="dark"] {
  /* The brand purple is too dark on a dark ground; use the lighter steps. */
  --primary: var(--fs-400);
  --primary-color: var(--fs-400);
  --brand-color: var(--fs-400);
  --btn-primary: var(--fs-500);
  --fs-btn-primary-hover: var(--fs-400);
  --fs-link: var(--fs-300);
  --sidebar-select-color: rgba(147, 96, 201, 0.18);
  --fs-sidebar-active-fg: var(--fs-200);
  --progress-bar-bg: var(--fs-400);
  --date-active-bg: var(--fs-500);
  --focus-default: 0 0 0 3px rgba(185, 148, 222, 0.35);
  --focus-outline-default: 2px solid rgba(185, 148, 222, 0.55);
  --focus-violet: var(--focus-default);
  --heading-color: #fff;
}

/* Fonts */
html, body, button, input, select, textarea { font-family: var(--fs-font-body); }
h1, h2, h3, .h1, .h2, .h3, .page-title .title-text, .widget-title, .login-content .page-card-head h4 {
  font-family: var(--fs-font-heading);
}

/* Primary button: fixed white label in both themes (Frappe flips it in dark) */
.btn.btn-primary { color: var(--fs-on-primary); background-color: var(--btn-primary); border-color: transparent; }
.btn-primary:hover, .btn.btn-primary:focus { color: var(--fs-on-primary); background-color: var(--fs-btn-primary-hover); border-color: transparent; }
.btn.btn-primary:active { color: var(--fs-on-primary) !important; background-color: var(--fs-800) !important; }
.btn-primary-light { color: var(--fs-700); background-color: var(--fs-50); }
[data-theme="dark"] .btn-primary-light { color: var(--fs-200); background-color: rgba(147, 96, 201, 0.18); }

/* Focus rings and selected inputs */
.form-control:focus, .awesomplete input:focus, .frappe-control input:focus {
  border-color: var(--primary); box-shadow: var(--focus-default); outline: 0;
}
:focus-visible { outline-color: var(--primary); }
input[type="checkbox"]:checked { background-color: var(--primary); }

/* Links */
.frappe-control a:not(.btn), .control-value a, .list-row-col a, .timeline-content a,
.page-container .page-content a:not(.btn):not(.dropdown-item):not(.item-anchor),
.web-footer a, .login-content a:not(.btn) { color: var(--fs-link); }

/* Sidebar active state (v16 workspace sidebar) */
.standard-sidebar-item:hover, .active-sidebar .standard-sidebar-item, .standard-sidebar-item.selected {
  background-color: var(--sidebar-select-color);
}
.active-sidebar .item-anchor, .active-sidebar .sidebar-item-label, .active-sidebar .sidebar-item-icon,
.active-sidebar .item-anchor svg { color: var(--fs-sidebar-active-fg); }
.active-sidebar .standard-sidebar-item { box-shadow: inset 3px 0 0 var(--primary); }

/* Page head / list / form accents */
.page-head { border-bottom-color: var(--border-color); }
.list-row-head, .form-section .section-head { font-family: var(--fs-font-body); }
.nav-tabs .nav-link.active, .form-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); }
.list-paging-area .btn-paging.btn-info, .btn-paging.btn-info { background-color: var(--primary); color: #fff; }
.progress-bar { background-color: var(--progress-bar-bg); }
.sidebar-section .sidebar-label, .widget .widget-title { letter-spacing: 0.01em; }
.widget { border-radius: 12px; }

/* Login page: wordmark sized, "Powered by" line already replaced via Website Settings */
.login-content .app-logo, .page-card-head .app-logo { max-height: 56px; width: auto; }
.web-footer .footer-powered { color: var(--text-muted); }