/* Global theme tokens only.
   IMPORTANT: these tokens should NOT force dark mode by default.
*/

@import url("walajna-dialog.css");

:root {
  /* Light mode — 60% light blue · 30% navy · 10% logo cyan accent (single flat page bg) */
  --wl-palette-bg: #e4edf7;
  --wl-palette-navy: #1a2f4a;
  --wl-palette-navy-mid: #243854;
  /* Logo field cyan (matches ALAJNA mark) */
  --wl-palette-logo: #36d7e8;
  --wl-palette-logo-deep: #1fb8d4;

  --wl-bg-body: #050811;
  --wl-surface-card: #101825;
  --wl-surface-card-soft: #121a27;
  --wl-surface-muted: #0d1521;

  --wl-border-subtle: rgba(148, 163, 184, 0.24);
  --wl-border-soft: rgba(148, 163, 184, 0.18);

  --wl-text-primary: #e5edf7;
  --wl-text-secondary: #dbe5f4;
  --wl-text-muted: #c3d0e4;
  --wl-text-placeholder: #c7d4e8;
  --wl-text-on-light: #1a2f4a;
  --wl-text-on-dark: #f8fafc;
  --wl-placeholder-on-light: rgba(26, 47, 74, 0.5);
  --wl-placeholder-on-dark: #c7d4e8;
  --wl-text-on-accent: #f9fafb;

  --wl-accent: #36d7e8;
  --wl-accent-strong: #1fb8d4;

  --wl-danger: #f97373;
  --wl-shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.45);
  --wl-shadow-elevated: 0 24px 60px rgba(15, 23, 42, 0.68);
  --wl-font-family: system-ui, -apple-system, "Segoe UI", "Tahoma", sans-serif;
  /* Match .walajna-topbar height (navstyle.css) for sticky sub-bars */
  --walajna-topbar-height: 88px;
}

html { scroll-behavior: smooth; }

body.dark-mode {
  color: var(--wl-text-primary);
  background-color: var(--wl-bg-body);
  font-family: var(--wl-font-family);
}

/* ===== Global contrast rule ===== */
/* Light backgrounds -> dark text */
body:not(.dark-mode){
  color: var(--wl-text-on-light);
}

body:not(.dark-mode) :is(
  h1,h2,h3,h4,h5,h6,p,span,li,label,strong,b,th,td,
  input,textarea,select,option
){
  color: var(--wl-text-on-light);
}

body:not(.dark-mode) :is(input,textarea)::placeholder{
  color: var(--wl-placeholder-on-light);
  opacity: 1;
}

/* Dark backgrounds -> light text */
body.dark-mode,
body.dark-mode :is(
  h1,h2,h3,h4,h5,h6,p,span,li,label,strong,b,th,td,
  .title,.card-title,.section-title,.page-title,.modal-title,
  .subtitle,.description,.helper-text,.label,.value,.muted,
  .meta,.meta-label,.meta-value,.timestamp,.message-date,.note,.hint
){
  color: var(--wl-text-on-dark) !important;
  opacity: 1;
}

body.dark-mode :is(input,textarea,select){
  color: var(--wl-text-on-dark) !important;
  -webkit-text-fill-color: var(--wl-text-on-dark) !important;
  caret-color: var(--wl-text-on-dark);
  color-scheme: dark;
}

/* Any dark page: autofill must not use light background + invisible text */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:active,
body.dark-mode textarea:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill:hover,
body.dark-mode textarea:-webkit-autofill:focus,
body.dark-mode textarea:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35) inset !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #f8fafc;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  transition: background-color 99999s ease-out 0s;
}

body.dark-mode :is(input,textarea)::placeholder{
  color: var(--wl-placeholder-on-dark) !important;
  opacity: 1;
}

/* Keep dropdown text always readable */
body.dark-mode select option{
  background: #0f172a;
  color: #f8fafc;
}

body:not(.dark-mode) select option{
  background: #ffffff;
  color: #1a2f4a;
}

/* Disabled controls readable in both modes */
body.dark-mode :is(input,textarea,select):disabled{
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0;
  opacity: 1;
}

body:not(.dark-mode) :is(input,textarea,select):disabled{
  color: #334155;
  opacity: 1;
}

/* Buttons and badges readable */
body.dark-mode :is(button,.btn,.action-btn,.badge,.status-badge,.type-badge){
  color: #f8fafc !important;
}

/* Text on bright primary buttons */
body.dark-mode :is(.btn-primary,.wl-btn--primary,.record-btn,.send){
  color: #052626 !important;
}

/* Global control icons visibility (date/number only) */

body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.15);
  opacity:1;
  cursor:pointer;
}

body:not(.dark-mode) input[type="date"]::-webkit-calendar-picker-indicator{
  filter: brightness(0) saturate(100%);
  opacity:1;
  cursor:pointer;
}

body.dark-mode input[type="number"]::-webkit-inner-spin-button,
body.dark-mode input[type="number"]::-webkit-outer-spin-button{
  opacity:1;
  filter:invert(1) brightness(1.2);
}

body:not(.dark-mode) input[type="number"]::-webkit-inner-spin-button,
body:not(.dark-mode) input[type="number"]::-webkit-outer-spin-button{
  opacity:.8;
  filter:none;
  background:transparent;
}

/* Password show/hide eye toggle */
.password-field{
  position: relative;
  display: block;
  width: 100%;
}

.password-field > input{
  width: 100%;
  padding-inline-end: 46px !important;
}

.password-field__toggle{
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(26, 47, 74, 0.55);
  cursor: pointer;
  line-height: 0;
  transition: color .15s ease, background-color .15s ease;
}

.password-field__toggle:hover,
.password-field__toggle:focus-visible{
  color: var(--wl-palette-navy, #1a2f4a);
  background: rgba(26, 47, 74, 0.06);
  outline: none;
}

.password-field__toggle.is-visible{
  color: var(--wl-palette-logo-deep, #1fb8d4);
}

body.dark-mode .password-field__toggle{
  color: #94a3b8;
}

body.dark-mode .password-field__toggle:hover,
body.dark-mode .password-field__toggle:focus-visible{
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.12);
}

body.dark-mode .password-field__toggle.is-visible{
  color: #22d3ee;
}

/* Floating Back — same cyan pill as .back-btn on history pages (strip UA styles so it never looks gray) */
.walajna-global-back{
  position:fixed;
  top:max(90px, calc(env(safe-area-inset-top, 0px) + var(--walajna-topbar-height) + 12px));
  inset-inline-end:22px;
  z-index:99;
  box-sizing:border-box;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:none;
  cursor:pointer;
  font:inherit;
  font-family:var(--wl-font-family);
  font-weight:800;
  font-size:16px;
  line-height:1;
  letter-spacing:0.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:44px;
  padding:0 1.5rem;
  border-radius:9999px;
  color:#1a2f4a !important;
  -webkit-text-fill-color:#1a2f4a;
  background:var(--wl-palette-logo) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 26px rgba(26, 47, 74, 0.12),
    0 4px 12px rgba(26, 47, 74, 0.08);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.walajna-global-back:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 32px rgba(26, 47, 74, 0.14),
    0 6px 16px rgba(26, 47, 74, 0.1);
}

.walajna-global-back:active{
  transform:translateY(0);
  filter:brightness(0.98);
}

body:not(.dark-mode) .walajna-global-back{
  color:#1a2f4a !important;
  -webkit-text-fill-color:#1a2f4a;
  background:var(--wl-palette-logo) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 22px rgba(26, 47, 74, 0.1),
    0 4px 12px rgba(26, 47, 74, 0.08);
}

body:not(.dark-mode) .walajna-global-back:hover{
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 14px 28px rgba(26, 47, 74, 0.12),
    0 6px 14px rgba(26, 47, 74, 0.09);
}

body.dark-mode button.walajna-global-back{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:linear-gradient(160deg, #5eead4 0%, #22d3ee 42%, #0ea5a2 100%) !important;
}

/* ----- Breadcrumb (Walajna) ----- */
/* Pinned below fixed .walajna-topbar (--walajna-topbar-height); z-index under the bar (100) */
.walajna-breadcrumb{
  box-sizing:border-box;
  width:100%;
  padding:10px 26px 14px;
  border-bottom:none;
  background:transparent;
  position:sticky;
  top:var(--walajna-topbar-height);
  z-index:90;
  box-shadow:none;
  margin-top:0;
  font-family:var(--wl-font-family, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif);
}

.walajna-breadcrumb *{
  font-family:inherit;
}

.walajna-breadcrumb > .walajna-breadcrumb__list{
  width:100%;
  min-width:0;
}

.walajna-breadcrumb__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 4px;
  font-family:var(--wl-font-family);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
}

.walajna-breadcrumb__item{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.walajna-breadcrumb__item:not(:last-child)::after{
  content:"/";
  margin-inline:8px;
  font-weight:600;
  opacity:0.45;
  color:inherit;
  pointer-events:none;
}

.walajna-breadcrumb__link{
  color:var(--wl-accent);
  text-decoration:none;
  border-radius:8px;
  padding:2px 4px;
  margin:-2px -4px;
  transition:color .15s ease, background .15s ease;
}

.walajna-breadcrumb__link:hover{
  color:var(--wl-accent-strong);
  text-decoration:underline;
  text-underline-offset:3px;
}

body:not(.dark-mode) .walajna-breadcrumb__link{
  color:#1a2f4a;
}

body:not(.dark-mode) .walajna-breadcrumb__link:hover{
  color:#1fb8d4;
}

.walajna-breadcrumb__current{
  color:var(--wl-text-muted);
  font-weight:800;
  max-width:min(52vw, 28rem);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body:not(.dark-mode) .walajna-breadcrumb__current{
  color:rgba(26, 47, 74, 0.55);
}

body:has(#walajna-breadcrumb) .walajna-global-back{
  top:max(118px, calc(env(safe-area-inset-top, 0px) + var(--walajna-topbar-height) + 40px));
}