/* ============================================
   tokens.css — Unified Design Tokens & Base
   Aman Bank Digital Platform
   OBDX Production Runtime + App Aliases + Reset
   ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap");

/* JET Framework Icon Font */
@font-face {
  font-family: "JetFW_iconfont";
  src: url("../fonts/JetFW_iconfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ═══════════════════════════════════════════
   OBDX Production Runtime Tokens
   (consumed by obdx-base.css + layout.css)
   ═══════════════════════════════════════════ */
:root {
  /* ── Base Dimensions ── */
  --base-dimension-docked-menu-height: 5.5rem;
  --base-dimension-menu-width: 18rem;

  /* ── Base Colors ── */
  --base-color-primary: #2c3251;
  --base-color-secondary: #003559;
  --base-color-secondary-text: #003559;
  --base-color-success: #2e7d32;
  --base-color-warning: #c35409;
  --base-color-warning-light: #fdf4e3;
  --base-color-success-light: #e7f6e8;
  --base-color-danger-light: #fdefef;
  --base-color-secondary-text-white: #e8e8e8;
  --base-color-danger: #dc2518;

  /* ── Base Borders & Backgrounds ── */
  --base-border-default: rgba(44, 50, 81, 0.1);
  --base-background-primary: #fff;
  --base-background-tertiary: #e7e7e9;
  --base-background-secondary: #fafafa;
  --base-background-disable: rgba(44, 50, 81, 0.2);

  /* ── Base Text ── */
  --base-text-primary: #2c3251;
  --base-text-secondary: rgba(44, 50, 81, 0.8);
  --base-text-tertiary: #2c3251;

  /* ── Base Font ── */
  --base-font-family: Roboto, sans-serif;
  --base-font-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,700";
  --base-font-weight-regular: 400;
  --base-font-weight-light: 300;
  --base-font-weight-bold: 700;
  --base-font-size-small: 0.7rem;
  --base-font-size-large: 1rem;
  --base-font-size-larger: 1.1rem;
  --base-font-size-default: 0.9rem;
  --base-font-size-medium: 0.8rem;

  /* ── Links ── */
  --link-hover: #0a8be6;
  --link-base-hover: #0a8be6;
  --link-base: #006ab5;
  --link-font-size: 0.9rem;
  --link-font-weight: 400;

  /* ── Base Input ── */
  --base-input-color: #fff;
  --base-transaprent-color: rgba(0, 0, 0, 0);

  /* ── Button Base ── */
  --button-height: 2.3rem;
  --button-padding: 0 0.5rem;
  --button-align: flex-start;
  --button-icon: none;
  --button-font-weight: 300;
  --button-color: #000;
  --button-font-size-text: 0.9rem;
  --button-font-size-icon: 1.1rem;

  /* ── Button: Primary ── */
  --button-primary-gradient-start-color: #003559;
  --button-primary-gradient-end-color: #003559;
  --button-primary-gradient-direction: bottom;
  --button-primary-foreground-color: #fff;
  --button-primary-font-size: 0.9rem;
  --button-primary-font-weight: 300;
  --button-primary-border-radius: 0.1rem;
  --button-primary-border-width: 0.055rem;
  --button-primary-border-color: #003559;

  /* ── Button: Secondary ── */
  --button-secondary-gradient-start-color: rgba(44, 50, 81, 0.8);
  --button-secondary-gradient-end-color: rgba(44, 50, 81, 0.8);
  --button-secondary-gradient-direction: bottom;
  --button-secondary-foreground-color: #fff;
  --button-secondary-font-size: 0.9rem;
  --button-secondary-font-weight: 300;
  --button-secondary-border-radius: 0.1rem;
  --button-secondary-border-width: 0.055rem;
  --button-secondary-border-color: rgba(44, 50, 81, 0.8);

  /* ── Button: Tertiary ── */
  --button-tertiary-gradient-start-color: rgba(44, 50, 81, 0.7);
  --button-tertiary-gradient-end-color: rgba(44, 50, 81, 0.7);
  --button-tertiary-gradient-direction: bottom;
  --button-tertiary-foreground-color: #fff;
  --button-tertiary-font-size: 0.9rem;
  --button-tertiary-font-weight: 300;
  --button-tertiary-border-radius: 0.1rem;
  --button-tertiary-border-width: 0.055rem;
  --button-tertiary-border-color: rgba(44, 50, 81, 0.7);

  /* ── Button: Help ── */
  --button-help-gradient-start-color: #fff;
  --button-help-gradient-end-color: #fff;
  --button-help-gradient-direction: bottom;
  --button-help-foreground-color: #006ab5;
  --button-help-font-size: 0.9rem;
  --button-help-font-weight: 300;
  --button-help-border-radius: 0.1rem;
  --button-help-border-width: 0.055rem;
  --button-help-border-color: #006ab5;

  /* ── Form ── */
  --form-line-height: 1.8rem;
  --form-padding: 1.3rem 0.6rem 0;
  --form-padding-small: 0.6rem 0 0;
  --form-border-width: 0.1rem;
  --form-shadow: none;
  --form-title-text-transform: none;
  --form-header-foreground-color: #2c3251;
  --form-header-font-size: 1.1rem;
  --form-header-font-weight: 400;
  --form-input-background-base: rgba(0, 0, 0, 0);
  --form-input-background-hover: rgba(0, 0, 0, 0);
  --form-input-background-focus: rgba(0, 0, 0, 0);
  --form-input-background-disable: rgba(0, 0, 0, 0);
  --form-input-text: 0.9rem;
  --form-input-color-base: #2c3251;
  --form-input-color-hover: #fff;
  --form-input-color-focus: #2c3251;
  --form-input-color-disable: rgba(44, 50, 81, 0.7);
  --form-input-border-radius: 0;
  --form-input-border-color: #ccc;
  --form-input-button-height: 2.3rem;
  --form-input-button-border-radius: 0.3rem;
  --form-input-button-border-width: 0;
  --form-gradient-start-color: #fff;
  --form-gradient-end-color: #fff;
  --form-gradient-direction: bottom;
  --form-foreground-color: #2c3251;
  --form-font-size: 0.9rem;
  --form-font-weight: 400;
  --form-icon-size: 8rem;
  --form-label-foreground-color: rgba(44, 50, 81, 0.8);
  --form-label-font-size: 0.8rem;
  --form-label-font-weight: 300;
  --form-info-txt-foreground-color: #2c3251;
  --form-info-txt-font-size: 0.8rem;
  --form-info-txt-font-weight: 300;
  --form-page-title-foreground-color: #2c3251;
  --form-page-title-font-size: 1.1rem;
  --form-page-title-font-weight: 400;
  --form-title-margin: 0.55rem 0;

  /* ── Banner ── */
  --banner-padding: 0.6rem;
  --banner-background: #ebecec;
  --banner-text-primary: rgba(44, 50, 81, 0.8);
  --banner-text-secondary: #2c3251;
  --banner-gradient-start-color: #ebecec;
  --banner-gradient-end-color: #ebecec;
  --banner-gradient-direction: bottom;
  --banner-foreground-color: #2c3251;
  --banner-font-size: 0.9rem;
  --banner-font-weight: 400;

  /* ── Review Banner ── */
  --review-banner-gradient-start-color: #fdf4e3;
  --review-banner-gradient-end-color: #fdf4e3;
  --review-banner-gradient-direction: bottom;
  --review-banner-border-color: #b86200;
  --review-banner-border-width: 0.4rem;
  --review-banner-border-radius: 0.01rem;
  --review-banner-foreground-color: #2c3251;
  --review-banner-font-size: 0.8rem;
  --review-banner-font-weight: 700;

  /* ── Navigation: Hover ── */
  --nav-hover-text: #006c75;
  --nav-hover-border: #006c75;
  --nav-hover-background: #e7e7e9;
  --nav-hover-gradient-start-color: #ededed;
  --nav-hover-gradient-end-color: #e7e7e9;
  --nav-hover-gradient-direction: bottom;
  --nav-hover-border-color: #006c75;
  --nav-hover-border-width: 0.2rem;
  --nav-hover-border-radius: 0.01rem;
  --nav-hover-foreground-color: #007580;
  --nav-hover-font-size: 1rem;
  --nav-hover-font-weight: 400;

  /* ── Navigation: Selected ── */
  --nav-selected-text: #003559;
  --nav-selected-border: #003559;
  --nav-selected-background: #fff;
  --nav-selected-border-color: #003559;
  --nav-selected-border-width: 0.2rem;
  --nav-selected-border-radius: 0.01rem;
  --nav-selected-foreground-color: #003559;
  --nav-selected-font-size: 1rem;
  --nav-selected-font-weight: 400;

  /* ── Navigation: Default ── */
  --nav-default-text: #2c3251;
  --nav-default-border: none;
  --nav-default-background: #fff;
  --nav-default-foreground-color: #2c3251;
  --nav-default-font-size: 0.9rem;
  --nav-default-font-weight: 400;

  /* ── Table ── */
  --table-header-background: #f5f5f5;
  --table-header-color: #333;
  --table-header-gradient-start-color: #fff;
  --table-header-gradient-end-color: #fff;
  --table-header-gradient-direction: bottom;
  --table-header-foreground-color: #333;
  --table-header-font-size: 0.9rem;
  --table-header-font-weight: 400;
  --table-body-gradient-start-color: #fff;
  --table-body-gradient-end-color: #fff;
  --table-body-gradient-direction: bottom;
  --table-body-foreground-color: #2c3251;
  --table-body-font-size: 0.9rem;
  --table-body-font-weight: 300;
  --table-body-icon-size: 8rem;
  --table-tr-hover-color: rgba(231, 231, 231, 0.6);
  --table-border-color: #fff;
  --table-border-width: 0.05rem;
  --table-border-radius: 0;

  /* ── List & Scroll ── */
  --list-drop-background: #c2eaf3;
  --scroll-track: #e6e6e6;
  --scroll-thumb: #999;

  /* ── Menu ── */
  --menu-background: #fff;
  --menu-gradient-start-color: #fff;
  --menu-gradient-end-color: #fff;
  --menu-gradient-direction: bottom;
  --menu-foreground-color: #02629f;
  --menu-font-size: 0.9rem;
  --menu-font-weight: 400;
  --menu-hover-color: #003d69;
  --menu-selected-color: purple;
  --menu-icon-font-size: 1.3rem;

  /* ── Welcome Box ── */
  --welcome-box-gradient-start-color: #003559;
  --welcome-box-gradient-end-color: #003559;
  --welcome-box-gradient-direction: bottom;
  --welcome-box-font-size: 0.9rem;
  --welcome-box-font-weight: 400;
  --welcome-box-foreground-color: #fff;

  /* ── Utility Colors ── */
  --color-white: #fff;
  --color-deep-yellow: #fbce4a;

  /* ── Header ── */
  --header-foreground-color: #fff;
  --header-height: 3.4rem;
  --header-small-height: 3rem;
  --header-gradient-start-color: #003559;
  --header-gradient-end-color: #003559;
  --header-border-bottom-color: #003559;
  --header-gradient-direction: bottom;
  --header-font-size: 1rem;
  --header-font-weight: 300;
  --header-icon-size: 1.3rem;

  /* ── Footer ── */
  --footer-gradient-start-color: #003559;
  --footer-gradient-end-color: #003559;
  --footer-gradient-direction: bottom;
  --footer-font-size: 0.8rem;
  --footer-foreground-color: #fff;
  --footer-height: 2rem;

  /* ── Help Panel ── */
  --help-panel-gradient-start-color: #fff;
  --help-panel-gradient-end-color: #fff;
  --help-panel-gradient-direction: bottom;
  --help-panel-foreground-color: #2c3251;
  --help-panel-font-size: 0.9rem;
  --help-panel-font-weight: 400;
  --help-panel-icon-size: 5rem;
  --help-panel-header-foreground-color: #2c3251;
  --help-panel-header-font-size: 1.05rem;
  --help-panel-header-font-weight: 700;

  /* ── App Background ── */
  --app-background-gradient-direction: bottom;
  --app-background-gradient-start-color: #fafafa;
  --app-background-gradient-end-color: #fafafa;

  /* ── Modal Window ── */
  --modal-window-header-gradient-direction: bottom;
  --modal-window-header-gradient-start-color: #003559;
  --modal-window-header-gradient-end-color: #003559;
  --modal-window-header-foreground-color: #fff;
  --modal-window-header-font-size: 1rem;
  --modal-window-header-font-weight: 300;
  --modal-window-body-gradient-direction: bottom;
  --modal-window-body-gradient-start-color: #fff;
  --modal-window-body-gradient-end-color: #fff;
  --modal-window-body-foreground-color: #2c3251;
  --modal-window-body-font-size: 0.9rem;
  --modal-window-body-font-weight: 300;

  /* ── Disabled Input ── */
  --disabledinput-gradient-direction: bottom;
  --disabledinput-gradient-start-color: #fafafa;
  --disabledinput-gradient-end-color: #fafafa;
  --disabledinput-foreground-color: #2c3251;
  --disabledinput-font-size: 0.9rem;
  --disabledinput-font-weight: 300;

  /* ── Accordion ── */
  --accordion-border-color: rgba(44, 50, 81, 0.1);
  --accordion-border-width: 0.0556rem;
  --accordion-border-radius: 0;
  --accordion-header-gradient-direction: bottom;
  --accordion-header-gradient-start-color: #fff;
  --accordion-header-gradient-end-color: #fff;
  --accordion-header-foreground-color: rgba(0, 0, 0, 0.85);
  --accordion-header-font-size: 1rem;
  --accordion-header-font-weight: 400;
  --accordion-header-icon-size: 4rem;
  --accordion-body-gradient-direction: bottom;
  --accordion-body-gradient-start-color: #fff;
  --accordion-body-gradient-end-color: #fff;
  --accordion-body-foreground-color: rgba(0, 0, 0, 0.85);
  --accordion-body-font-size: 1rem;
  --accordion-body-font-weight: 400;
  --accordion-disabled-header-gradient-direction: bottom;
  --accordion-disabled-header-gradient-start-color: #fafafa;
  --accordion-disabled-header-gradient-end-color: #fafafa;
  --accordion-disabled-header-foreground-color: rgba(0, 0, 0, 0.38);
  --accordion-disabled-header-font-size: 1rem;
  --accordion-disabled-header-font-weight: 400;

  /* ── Overlay ── */
  --overlay-gradient-direction: bottom;
  --overlay-gradient-start-color: #fff;
  --overlay-gradient-end-color: #fff;
  --overlay-header-foreground-color: var(--base-color-primary);
  --overlay-header-font-size: 1.1rem;
  --overlay-header-font-weight: 400;

  /* ── Alert Notification ── */
  --alert-notification-gradient-direction: bottom;
  --alert-notification-gradient-start-color: #fff;
  --alert-notification-gradient-end-color: #fff;
  --alert-notification-header-foreground-color: rgba(0, 0, 0, 0.6);
  --alert-notification-header-font-size: 0.785rem;
  --alert-notification-header-font-weight: 400;
  --alert-notification-body-foreground-color: rgba(0, 0, 0, 0.8);
  --alert-notification-body-font-size: 0.8rem;
  --alert-notification-body-font-weight: 400;

  /* ── Widget ── */
  --widget-border-color: #2c3251;
  --widget-border-width: 0.05rem;
  --widget-border-radius: 0.1rem;
  --widget-header-foreground-color: #fff;
  --widget-header-font-size: 1rem;
  --widget-header-font-weight: 400;

  /* ── Admin Panel ── */
  --admin-accent: var(--base-color-primary);
}

/* ═══════════════════════════════════════════
   App Shorthand Aliases
   (consumed by layout.css, components.css,
    animations.css, responsive.css)
   ═══════════════════════════════════════════ */
:root {
  /* ── Color Palette ── */
  --primary: #2c3251;
  --primary-light: #eef0f5;
  --secondary: #003559;
  --accent: #003559;
  --gold: #fbce4a;
  --gold-dark: #f3b705;

  --success: #2e7d32;
  --success-light: #e7f6e8;
  --danger: #dc2518;
  --danger-light: #fdefef;
  --warning: #c35409;
  --warning-light: #fdf4e3;

  /* ── Grays ── */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e7e7e9;
  --gray-400: #999;
  --gray-500: rgba(44, 50, 81, 0.7);
  --gray-600: rgba(44, 50, 81, 0.8);
  --white: #fff;

  /* ── Borders ── */
  --border-default: rgba(44, 50, 81, 0.1);
  --border-input: #ccc;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.18);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.14);

  /* ── Radius ── */
  --radius-sm: 0.1rem;
  --radius: 0.3rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 300ms;

  /* ── Secondary accent (burgundy) ── */
  --secondary-btn: rgb(126, 25, 70);

  /* ── Header / Footer (shorthand) ── */
  --header-bg: #003559;
  --header-fg: #fff;
  --header-border: #003559;
  --footer-bg: #003559;

  /* ── Nav (shorthand) ── */
  --nav-color: #2c3251;
  --nav-hover: #007580;
  --nav-selected-border: #003559;

  /* ── Text alias ── */
  --text-primary: var(--base-text-primary);
}

/* ═══════════════════════════════════════════
   Oracle JET (OJ) Framework Tokens
   Production runtime variables
   ═══════════════════════════════════════════ */
:root {
  --oj-brand-color-light5: #e8f3fa;
  --oj-brand-color-light4: #e1eff8;
  --oj-brand-color-light3: #d7eaf6;
  --oj-brand-color-light2: #b3d7ee;
  --oj-brand-color-light1: #76b8e1;
  --oj-brand-color: #027bc7;
  --oj-brand-color-dark1: #02629f;
  --oj-brand-color-dark2: #014a77;
  --oj-neutral-color1: white;
  --oj-neutral-color2: #fcfcfd;
  --oj-neutral-color3: #fafafa;
  --oj-neutral-color4: #f7f7f8;
  --oj-neutral-color5: #f2f2f3;
  --oj-neutral-color6: #ededee;
  --oj-neutral-color7: #e5e6e6;
  --oj-neutral-color8: #e0e1e1;
  --oj-neutral-color9: #cbcccd;
  --oj-neutral-color10: #c6c7c8;
  --oj-neutral-color11: #b1b3b4;
  --oj-neutral-color12: #8a8d8f;
  --oj-neutral-color13: #707375;
  --oj-neutral-color14: #4b4d4e;
  --oj-neutral-color15: #323334;
  --oj-neutral-color16: #252627;
  --oj-neutral-color17: black;
  --oj-contrast-background-1-color: #323334;
  --oj-font-size: 1rem;
  --oj-smallest-font-size: 0.78571rem;
  --oj-small-font-size: 0.85714rem;
  --oj-medium-font-size: 1.14286rem;
  --oj-large-font-size: 1.28571rem;
  --oj-largest-font-size: 1.42857rem;
  --oj-text-color: rgba(0, 0, 0, 0.8);
  --oj-primary-text-color: black;
  --oj-secondary-text-color: rgba(0, 0, 0, 0.7);
  --oj-tertiary-text-color: rgba(0, 0, 0, 0.55);
  --oj-contrast-text-color: white;
  --oj-text-color-disabled: rgba(0, 0, 0, 0.38);
  --oj-form-control-label-color: rgba(0, 0, 0, 0.6);
  --oj-link-text-color: #02629f;
  --oj-link-text-color-active: #014a77;
  --oj-link-text-color-visited: #02629f;
  --oj-link-text-color-disabled: rgba(0, 0, 0, 0.38);
  --oj-link-text-decoration: none;
  --oj-link-text-decoration-hover: underline;
  --oj-link-font-weight-active: normal;
  --oj-link-bg-color-active: transparent;
  --oj-icon-color: rgba(0, 0, 0, 0.8);
  --oj-icon-color-default: #8a8d8f;
  --oj-icon-color-hover: #76b8e1;
  --oj-icon-color-active: #027bc7;
  --oj-icon-color-selected: #027bc7;
  --oj-icon-color-disabled: #cbcccd;
  --oj-drop-target-1-color: #d9f4fa;
  --oj-drop-target-2-color: #c2eaf3;
  --oj-color-required: #02629f;
}

/* ═══════════════════════════════════════════
   CSS Reset & Base Element Styles
   ═══════════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  min-height: 100vh;
  height: 100%;
  position: relative;
}

body {
  font-family: "Cairo", var(--base-font-family);
  direction: rtl;
  text-align: right;
  padding: 0;
  margin: 0;
  background: linear-gradient(
    to var(--app-background-gradient-direction),
    var(--app-background-gradient-start-color),
    var(--app-background-gradient-end-color)
  );
  color: var(--base-text-primary);
  font-size: var(--base-font-size-default);
  font-weight: var(--base-font-weight-regular);
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: relative;
}

a {
  color: var(--link-base);
  text-decoration: none;
  font-weight: 400;
  transition: color var(--dur);
}
a:hover,
a:focus {
  color: var(--link-hover);
}

/* ── OBDX Page Transition (body half-panels) ── */
body::before,
body::after {
  box-sizing: border-box;
  content: "";
  height: 50vh;
  width: 100%;
  position: fixed;
  inset-inline-end: 0;
  background-color: #fafafa;
  z-index: 1;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.4s 0.4s;
  pointer-events: none;
}
body::before {
  top: 0;
  transform: translateY(-100%);
}
body::after {
  bottom: 0;
  transform: translateY(100%);
}
body.page-is-changing::before,
body.page-is-changing::after {
  transform: translateY(0);
  transition: transform 0.4s;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
}
button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--secondary);
  color: var(--white);
}

::-webkit-scrollbar {
  width: 0.3rem;
  height: 0.3rem;
}
::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
}