/* assets/custom.css */

/* 1. Define the custom font from your local file */
@font-face {
  font-family: 'Salesforce Sans';
  src: url('fonts/SalesforceSans-Regular.ttf') format('truetype');
}

/* --- Global & Root Styles --- */

:root {
  /* Define your Salesforce Lightning Design System (SLDS) tokens here if you have them */
  /* If not, you can replace the var() calls below with actual hex codes */
  --slds-g-color-background: #f3ebeb;
  --slds-g-color-on-surface-1: #181818;
  --slds-g-color-border-1: #f1ae8d;
  --slds-g-color-background-alt: #f1f2ec;
  --slds-g-color-background-alt-2: #f0f1e8;
  --slds-g-color-accent-1: #0070d2;
  --slds-g-color-accent-2: #005fb2;
  --slds-g-radius-1: 0.25rem;
  --slds-g-radius-2: 0.5rem;
  --slds-g-spacing-2: 0.5rem;
  --slds-g-spacing-4: 1rem;
  --slds-g-font-weight-6: 700;
}

html {
    font-size: 20px;
}

/* 2. Apply the font to the whole app with high specificity */
/* This targets the body and all child elements, inputs, buttons, etc. */
body, .dash-spreadsheet-container, .dash-cell, input, button, select, textarea {
  font-family: 'Salesforce Sans', sans-serif !important; /* Use !important to override defaults */
  background-color: var(--slds-g-color-background);
  color: var(--slds-g-color-on-surface-1);
  margin: 0;
  padding: 0;
}

/* --- Component Styles --- */

.sfdc-card {
    background-color: var(--slds-g-color-background-alt);
    border: 1px solid var(--slds-g-color-border-1);
    border-radius: var(--slds-g-radius-2);
    padding: var(--slds-g-spacing-4);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
    height: 100%;
    box-sizing: border-box;
}

.data-table-container {
    border: 2px solid black;
    padding: 10px;
}

/* --- Button Styling --- */
.sfdc-button {
    background-color: var(--slds-g-color-accent-1);
    color: white;
    border: 1px solid var(--slds-g-color-accent-1);
    padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4);
    border-radius: var(--slds-g-radius-1);
    font-weight: var(--slds-g-font-weight-6);
    cursor: pointer;
    transition: background-color 0.2s;
    height: 32px;
    line-height: 1; /* Adjust line-height for vertical alignment */
}

.sfdc-button:hover {
    background-color: var(--slds-g-color-accent-2);
}

.sfdc-dropdown {

    font-family: 'Salesforce Sans', sans-serif !important; /* Ensure font is applied here too */
}

/* Targets the main control box */
.sfdc-dropdown .Select-control {
    background-color: var(--slds-g-color-background-alt) !important;
    border: 1px solid var(--slds-g-color-border-1) !important;
    border-radius: var(--slds-g-radius-1) !important;
    height: 32px;
}

/* Targets the text for selected value or placeholder */
.sfdc-dropdown .Select-value-label,
.sfdc-dropdown .Select-placeholder {
    color: var(--slds-g-color-on-surface-1) !important;
    line-height: 30px !important;
}

/* Targets the dropdown arrow */
.sfdc-dropdown .Select-arrow {
    border-top-color: var(--slds-g-color-on-surface-1) !important;
}

/* Targets the menu that appears */
.sfdc-dropdown .Select-menu-outer {
    background-color: var(--slds-g-color-background-alt) !important;
    border: 1px solid var(--slds-g-color-border-1) !important;
}

/* Targets an option in the menu */
.sfdc-dropdown .Select-option {
    background-color: var(--slds-g-color-background-alt);
    color: var(--slds-g-color-on-surface-1);
}

/* Targets a hovered or focused option */
.sfdc-dropdown .Select-option.is-focused {
    background-color: var(--slds-g-color-background-alt-2) !important;
}