/* Daly Core Custom Styles */

/* Font imports */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* CoopBank Font Family - Daly Core Design System */
@font-face {
  font-family: "CoopBank";
  src: url("/fonts/CoopBank-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoopBank";
  src: url("/fonts/CoopBank.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoopBank";
  src: url("/fonts/CoopBank-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CoopBank";
  src: url("/fonts/CoopBank-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Custom CSS Variables */
:root {
  --daly-primary: #007db8;
  --daly-primary-light: #38b4e8;
  --daly-primary-dark: #006493;
  --daly-secondary: #23254f;
  --daly-secondary-light: #3d3f6b;
  --daly-secondary-dark: #191b3a;
  --daly-background: #fafafa;
  --daly-surface: #ffffff;
  --daly-text-primary: #181818;
  --daly-text-secondary: #5e5e5e;
  --daly-text-disabled: #767676;
  --daly-error: #da1e28;
  --daly-success: #388415;
  --daly-warning: #ffcd00;
  --daly-border: #767676;
  --daly-border-disabled: #c8c8c8;
  --daly-fill-tertiary: #e1e4e5;
}

/* Global styles */
body {
  font-family: "CoopBank";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Co-op: Keep base font size at 1rem on all screen sizes (no mobile font scaling) */
html {
  font-size: 1rem !important;
}

/* Focus states for accessibility */
*:focus-visible {
  outline: 2px solid var(--daly-primary);
  outline-offset: 2px;
}

/* Co-op: Make auth/login page logo bigger */
.MuiGrid-container > .MuiGrid-item:first-child img {
  width: 80% !important;
  max-width: 400px;
  min-width: 280px;
}

/* ============================================
   Co-op: Full Navy Blue Sidebar Styling
   ============================================ */

/* Target the sidebar drawer paper - FULL NAVY BLUE (left sidebar only) */
.MuiDrawer-root.MuiDrawer-docked .MuiDrawer-paper,
.MuiDrawer-root.MuiDrawer-docked .MuiPaper-root,
#sidebar_box_container {
  background-color: #23254f !important;
  background: #23254f !important;
}

/* All text in sidebar should be white */
.MuiDrawer-root.MuiDrawer-docked .MuiTypography-root,
.MuiDrawer-root.MuiDrawer-docked .MuiListItemText-root,
.MuiDrawer-root.MuiDrawer-docked .MuiListItemText-primary,
.MuiDrawer-root.MuiDrawer-docked span,
#sidebar_box_container .MuiTypography-root,
#sidebar_box_container span {
  color: #ffffff !important;
}

/* All icons in sidebar should be white */
.MuiDrawer-root.MuiDrawer-docked .MuiSvgIcon-root,
.MuiDrawer-root.MuiDrawer-docked .MuiListItemIcon-root,
.MuiDrawer-root.MuiDrawer-docked svg,
#sidebar_box_container .MuiSvgIcon-root,
#sidebar_box_container svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Sidebar menu item hover */
.MuiDrawer-root.MuiDrawer-docked .MuiListItemButton-root:hover,
.MuiDrawer-root.MuiDrawer-docked .MuiButtonBase-root:hover,
#sidebar_box_container .MuiListItemButton-root:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar menu item selected/active */
.MuiDrawer-root.MuiDrawer-docked .MuiListItemButton-root.Mui-selected,
.MuiDrawer-root.MuiDrawer-docked .MuiButtonBase-root.Mui-selected,
#sidebar_box_container .MuiListItemButton-root.Mui-selected {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dividers in sidebar */
.MuiDrawer-root.MuiDrawer-docked .MuiDivider-root,
#sidebar_box_container .MuiDivider-root {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   Co-op: Right-side drawer (customer list panel) — reset to light theme
   ============================================ */
.MuiDrawer-paperAnchorRight {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #060a0d !important;
}

/* ============================================
   Co-op: Sidebar Toggle Button (>> and << icons)
   ============================================ */

/* Desktop: always transparent */
button#menu-toggle,
[data-testid="side-bar-burger-btn"] {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

button#menu-toggle:hover,
[data-testid="side-bar-burger-btn"]:hover {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================
   Co-op: border-radius + box-shadow overrides
   The get-paid widget uses its own ThemeProvider with shape.borderRadius=8
   which causes sx-based borderRadius multipliers to produce large values (40px, 64px).
   We only target the specific list/card screens, not modals/forms.
   ============================================ */

/* Cards only — exclude status chips which are also MuiCard-root */
.MuiCard-root:not([data-testid*="status"]) {
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Table containers — fix excessive border-radius from sx multiplier */
.MuiTableContainer-root {
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Customer list wrapper (CustomerCard.tsx) — hardcoded borderRadius: 12px override */
/* :has(#createCTAButton) {
  border-radius: 4px !important;
} */

/* CustomerInfoCard rows — fix border-radius from sx multiplier */
[role="button"][aria-label^="Select "],
[role="button"][aria-pressed],
.MuiBox-root:has(.MuiCheckbox-root),
.MuiBox-root:has(.MuiRadio-root) {
  border-radius: 4px !important;
}

/* Status chips — target only chip elements, not table header cells */
[data-testid*="-status"] {
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 0px 10px !important;
}

/* Status chip colors — widget sx styles are overridden by CSS cascade in coop env */
[data-testid="created-status"] {
  background-color: rgba(33, 150, 243, 0.08) !important;
  border: 1.5px solid rgba(33, 150, 243, 0.3) !important;
}
[data-testid="requestmade-status"],
[data-testid="request_made-status"] {
  background-color: rgba(255, 152, 0, 0.08) !important;
  border: 1.5px solid rgba(255, 152, 0, 0.3) !important;
}
[data-testid="inprogress-status"],
[data-testid="in_progress-status"],
[data-testid="scheduled-status"] {
  background-color: rgba(33, 150, 243, 0.08) !important;
  border: 1.5px solid rgba(33, 150, 243, 0.3) !important;
}
[data-testid="paymentreceived-status"],
[data-testid="payment_received-status"],
[data-testid="paymentsent-status"],
[data-testid="payment_sent-status"] {
  background-color: rgba(76, 175, 80, 0.08) !important;
  border: 1.5px solid rgba(76, 175, 80, 0.3) !important;
}
[data-testid="declined-status"] {
  background-color: rgba(244, 67, 54, 0.08) !important;
  border: 1.5px solid rgba(244, 67, 54, 0.3) !important;
}
[data-testid="cancelled-status"] {
  background-color: rgba(120, 144, 156, 0.08) !important;
  border: 1.5px solid rgba(120, 144, 156, 0.3) !important;
}

/* Dialog/modal panels — target by role="dialog" to avoid breaking other elements */
[role="dialog"].MuiBox-root {
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Buttons — fix pill/capsule shape */
.MuiButton-root:not(#menu-toggle) {
  border-radius: 4px !important;
}

/* ============================================
   Co-op: Fix text visibility inside modals
   Only target direct Typography text nodes, not icons/SVGs.
   ============================================ */
.MuiModal-root .MuiTypography-root {
  color: #060a0d !important;
}

/* Keep button text colour correct (white on filled buttons) */
.MuiModal-root .MuiButton-containedPrimary,
.MuiModal-root .MuiButton-containedPrimary .MuiTypography-root,
.MuiModal-root .MuiButton-containedPrimary span {
  color: #ffffff !important;
}
.MuiModal-root .MuiButton-containedSecondary,
.MuiModal-root .MuiButton-containedSecondary .MuiTypography-root,
.MuiModal-root .MuiButton-containedSecondary span {
  color: #ffffff !important;
}

/* Fix loading spinner in modal */
.MuiModal-root .MuiCircularProgress-root circle {
  stroke: #0074cc !important;
}

/* Fix input labels and helper text */
.MuiModal-root .MuiInputLabel-root,
.MuiModal-root .MuiFormLabel-root,
.MuiModal-root .MuiFormHelperText-root {
  color: #060a0d !important;
}

/* Fix input text */
.MuiModal-root .MuiInputBase-input,
.MuiModal-root .MuiOutlinedInput-input {
  color: #060a0d !important;
}

/* Fix checkbox — checked state should be #0074CC */
.MuiModal-root .MuiCheckbox-root.Mui-checked,
.MuiModal-root .MuiCheckbox-colorPrimary.Mui-checked {
  color: #0074cc !important;
}
.MuiModal-root .MuiCheckbox-root svg {
  color: #0074cc !important;
  fill: #0074cc !important;
}

/* Mobile only: >> button (sidebar closed) gets blue background */
@media (max-width: 599px) {
  button#menu-toggle,
  [data-testid="side-bar-burger-btn"] {
    background-color: #0074cc !important;
    background: #0074cc !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  }

  /* Mobile << button (sidebar open, inside drawer): transparent */
  .MuiDrawer-root button#menu-toggle,
  .MuiDrawer-root [data-testid="side-bar-burger-btn"],
  .MuiModal-root button#menu-toggle,
  .MuiModal-root [data-testid="side-bar-burger-btn"] {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .MuiDrawer-root button#menu-toggle:hover,
  .MuiDrawer-root [data-testid="side-bar-burger-btn"]:hover,
  .MuiModal-root button#menu-toggle:hover,
  .MuiModal-root [data-testid="side-bar-burger-btn"]:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }
}