:root {
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --color-bg-page: #f8f9fa;
    --color-primary: #6c8ebf;
    --color-primary-dark: #4c5c8a;
    --color-text: #333;
    --color-text-light: #4c5c8a;
    --color-table-header-bg: var(--color-primary);
    --color-table-row-alt: #f2f2f2;
    --color-table-row-hover: #e9ecef;
    --radius: 6px;
    --shadow-light: 0 0 10px rgba(0, 0, 0, 0.05);
    --shadow-btn: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-btn-hover: 0 4px 8px rgba(0,0,0,0.2);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--color-bg-page);
}

/* Page title */
.page-title {
    text-align: center;
    color: var(--color-primary-dark);
    margin: 20px 0;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    font-family: var(--font-sans);
}
.table th,
.table td {
    border: 1px solid #ddd;
    padding: 5px;
    font-size: 14px;
    text-align: left;
    color: var(--color-text);
}
.table th {
    background-color: var(--color-table-header-bg);
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.table td.highlight {
  color: var(--color-primary-dark);
  font-weight: 500;
    text-align: center;
}
.table td a {
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 500;
}
.table td a:hover {
    text-decoration: underline;
}
.table .number {
    --font-weight: 500;
    --color: var(--color-text-light);
    text-align: center;
}
.table tr:nth-child(even) {
    background-color: var(--color-table-row-alt);
}
.table tr:hover {
    background-color: var(--color-table-row-hover);
}

/* Details row */
.details {
    display: none;
    background-color: var(--color-bg-page);
    border-top: 1px solid #ddd;
    padding: 10px;
}
.details-row {
    background-color: #f9f9f9;
}
.details-content {
    padding: 10px 16px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.5;
    background-color: var(--color-table-row-alt);
    border-top: 1px solid #ddd;
}
.details-content p {
    margin: 8px 0;
}
.details-content a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.details-content a:hover {
    text-decoration: underline;
    color: var(--color-primary-dark);
}

/* Controls and buttons */
.table-controls {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0 5px;
}
.btn {
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.btn--primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-btn);
}
.btn--primary:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-btn-hover);
}
.btn--primary:active {
    transform: scale(0.98);
}

/* ------------------------------------------------------------------
   Layout containers
   ------------------------------------------------------------------ */

.card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  padding: 20px;
  margin: 0 auto;
  max-width: 1000px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* ------------------------------------------------------------------
   Form controls
   ------------------------------------------------------------------ */

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------
   Action buttons row
   ------------------------------------------------------------------ */

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.actions.full-width {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------
   Cancel button
   ------------------------------------------------------------------ */

.btn--cancel {
  background-color: #e9ecef;
  color: var(--color-text-light);
  box-shadow: var(--shadow-btn);
}

.btn--cancel:hover {
  background-color: #d6d8db;
}





/* ------------------------------------------------------------------
   New Company page form (left-aligned, no white card)
   ------------------------------------------------------------------ */

.new-company-container {
  max-width: 800px;     /* keep it from getting too wide */
  margin: 0;            /* flush left within <main> */
  padding: 0;           
}

.new-company-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  background: none;     /* no white box */
  box-shadow: none;
  padding: 0;
}

.new-company-form .form-group {
  display: flex;
  flex-direction: column;
}

.new-company-form label {
  color: var(--color-primary-dark);
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 14px;
}

.new-company-form input:not(vaadin-date-picker *),
.new-company-form select,
.new-company-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.new-company-form input:focus:not(vaadin-date-picker *),
.new-company-form select:focus,
.new-company-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 5px rgba(108, 142, 191, 0.5);
}

.new-company-form .full-width {
  grid-column: 1 / -1;
}

.new-company-form .actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  justify-content: flex-start;  /* buttons start at left */
}


/* ------------------------------------------------------------------
   Tabbed interface
   ------------------------------------------------------------------ */
.tabs {
  margin-top: 2rem;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
}

.tabs__nav {
  display: flex;
  list-style: none;      /* <-- remove bullets */
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
}

.tabs__nav-item {
  padding: 0.5rem 1rem;
  margin-right: 0.25rem;
  background: var(--color-table-row-alt);
  color: var(--color-text);
  cursor: pointer;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  transition: background-color 0.2s;
}

.tabs__nav-item:hover {
  background: var(--color-bg-page);
}

.tabs__nav-item.active {
  background: var(--color-primary);
  color: white;
  border-bottom: 1px solid white; /* hide the bottom border when active */
}

.tabs__content {
  padding: 1rem;
}

.tabs__pane {
  display: none;
}

.tabs__pane.active {
  display: block;
}


/* ------------------------------------------------------------------
   Generic panels layout (for splitting into 2, 3, 4� columns)
   ------------------------------------------------------------------ */

:root {
  --panel-gap: 1.5rem;
}

/* Container you wrap around your panels */
.panels-container {
  display: grid;
  /* default to 2 columns; override with --cols */
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: var(--panel-gap);
  margin-bottom: 2rem;
}

/* Each individual panel panel */
.panel {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  padding: 1rem;
  box-sizing: border-box;
}

/* Panel header/title */
.panel-title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  text-align: center;
}




/* ------------------------------------------------------------------
   Messages
   ------------------------------------------------------------------ */

.message-error {
  color: #dc3545;   
  font-weight: 500;
}

.message-success {
  color: #28a745;
  font-weight: 500;
}


/* ------------------------------------------------------------------
   date picker adjustments
   ------------------------------------------------------------------ */

   vaadin-date-picker {
      /* Set the base background to white for all states */
      --vaadin-input-field-background: white !important;

      /* Override the hover highlight effect */
      --vaadin-input-field-hover-highlight: transparent !important;
      --vaadin-input-field-hover-highlight-opacity: 0 !important;

      
      --vaadin-input-field-height: 39px;      
      
    
      /* Ensure no extra margin is applied to the component itself */
      padding: 0 !important;

      --vaadin-focus-ring-width: 0 !important;
      --vaadin-focus-ring-color: transparent !important;
  }

        
  /* 2. Base style for the input field: white background and gray border */
  vaadin-date-picker::part(input-field) {
      background-color: white !important;
      border: 1px solid lightgray !important;
      border-radius: var(--radius);
      font-size: 14px;
      font-family: var(--font-sans);
      font-weight: normal !important;

      box-shadow: none !important;
  }

  vaadin-date-picker[focused]::part(input-field) {
      /* Apply the exact focus shadow from your .new-company-form input:focus rule */
      box-shadow: 0 0 5px rgba(108, 142, 191, 0.5) !important;
    
      /* Apply the exact border color from your .new-company-form input:focus rule */
      border-color: var(--color-primary) !important;
  }

  /* The focus-ring attribute is added when using the keyboard to focus */
  vaadin-date-picker[focus-ring]::part(input-field) {
      /* Apply the exact focus shadow from your .new-company-form input:focus rule */
      box-shadow: 0 0 5px rgba(108, 142, 191, 0.5) !important; 
      /* Apply the exact border color from your .new-company-form input:focus rule */
      border-color: var(--color-primary) !important;
  }

  /* -------------------------------------------------------------
   Tom Select Overrides (FIXED SIZING AND NO EXPANSION)
   ------------------------------------------------------------- */

/* 1. Tom Select WRAPPER: Must be 100% to fill its assigned proportional grid column (2fr) */
div.ts-wrapper,
div.ts-wrapper.single,
div.ts-wrapper.multi {
    width: 100% !important; 
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background-color: white !important;
    border-radius: var(--radius) !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
}

/* 2. Control area (visible box) */
div.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* 3. Focus effect (matches your input:focus) */
div.ts-wrapper.focus .ts-control,
div.ts-wrapper:focus-within .ts-control {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 5px rgba(108,142,191,0.5) !important;
}

/* 4. The inner input (typing field) */
div.ts-wrapper .ts-control input[type="text"],
div.ts-wrapper .ts-control input[role="combobox"] {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    margin: 0 !important;
    /* KEY: Prevent horizontal expansion */
    flex: 1 1 auto !important; 
    min-width: 1px !important;
    width: 100% !important;
    line-height: 1.2 !important;
    height: auto !important;
}

/* 5. Selected item look */
div.ts-wrapper .item,
div.ts-wrapper.single .item {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--color-text) !important;
    background: transparent !important;
    font-weight: 400 !important; 
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* 6. Prevent Tom Select double-line/expansion on focus (The ultimate fix) */
.ts-wrapper.single .ts-control {
    flex-wrap: nowrap !important;
    overflow: hidden !important; 
    white-space: nowrap !important;
}

/* 7. Dropdown styles (kept as originally provided) */
div.ts-wrapper .ts-dropdown {
    display: none; 
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 2px;
    border: 1px solid #ddd;
    border-radius: 0 0 var(--radius) var(--radius);
    background: white;
    box-shadow: var(--shadow-light);
    z-index: 2000;
}

div.ts-wrapper.ts-open .ts-dropdown,
div.ts-wrapper.is-open .ts-dropdown {
    display: block; 
}