/* --- TYPOGRAPHY & GLOBAL THEME --- */
/* --- OPTIMIZED TYPOGRAPHY (English + Japanese) --- */
:root {
  /* 1. Inter/Segoe UI/Roboto: Clean sans-serifs for English/Numbers.
     2. Hiragino Kaku Gothic ProN: The standard high-end font for Japanese on macOS.
     3. Meiryo / Yu Gothic: The standards for Windows.
     4. sans-serif: The fallback.
  */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic Medium", "Yu Gothic", sans-serif;
  
  --primary-navy: #0F172A;
  --secondary-slate: #64748B;
  --border-light: #E2E8F0;
  --bg-offwhite: #F8FAFC;
}

body, .layout {
  font-family: var(--font-family) !important;
  background-color: var(--bg-offwhite) !important;
  color: var(--primary-navy);
}

/* --- HEADERS --- */
/* Make the title look like a legal document header */
h1, h2, h3 {
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--primary-navy);
}

/* --- THE TABLE (Targeting our 'legal-table' class) --- */
/* This softens the grid. Requires you to add 'legal-table' class to the element */

/* --- THE DOCUMENT CONTAINER (Paper Effect) --- */
.legal-table {
  background: white !important;
  
  /* 1. The Border: Crisp and subtle */
  border: 1px solid var(--border-light) !important;
  
  /* 2. The Brand Accent: A dark navy strip at the top to look 'official' */
  border-top: 4px solid var(--primary-navy) !important;
  
  /* 3. The Shadow: Layered for realism */
  /* Layer 1: Tight shadow for definition */
  /* Layer 2: Soft, diffuse shadow for 'lift' off the page */
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 
    0 10px 15px -3px rgba(0, 0, 0, 0.03) !important;
    
  border-radius: 8px !important;
  overflow: hidden; /* Keeps the corners clean */
  
  /* Spacing: Lifts the table away from the intro text */
  margin-top: 24px !important; 
  margin-bottom: 40px !important;
}

/* Header Row Styling */
.legal-table th {
  background-color: white !important;
  color: var(--secondary-slate) !important;
  text-transform: uppercase;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border-light) !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Body Row Styling */
.legal-table td {
  border-bottom: 1px solid var(--border-light) !important;
  border-right: none !important; /* Removes vertical grid lines for a cleaner look */
  border-left: none !important;
  padding: 18px 12px !important; /* More breathing room */
  vertical-align: middle;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #334155;
}

/* Hover effect for rows to guide the eye */
.legal-table tr:hover td {
  background-color: #F1F5F9 !important;
}

/* --- THE BUTTONS --- */
/* Transforming the loud blue buttons into sophisticated actions */

/* Target buttons inside the table */
.legal-table button {
  background-color: transparent !important;
  border: 1px solid var(--primary-navy) !important;
  color: var(--primary-navy) !important;
  font-weight: 500;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease;
  box-shadow: none !important;
}

.legal-table button:hover {
  background-color: var(--primary-navy) !important;
  color: white !important;
}

/* --- UTILITY BADGES (Status) --- */
/* Optional: If the status is a pill, try to mute it. 
   Note: This depends on Baserow's internal rendering classes. */
.cell-select-option {
    border-radius: 4px !important;
    font-weight: 500;
    font-size: 0.8rem;
}

/* --- FILTER BUTTON REFINEMENT --- */
/* Target the button in the header/control bar area above the grid */

.legal-table .header__filter-button,
.legal-table .view-header button,
.legal-table .control-bar button {
  background-color: transparent !important;
  border: 1px solid var(--border-light) !important;
  color: var(--secondary-slate) !important;
  box-shadow: none !important;
  font-weight: 500;
  border-radius: 4px;
  padding: 6px 12px !important;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

/* Hover state: Darken slightly, but don't turn Navy (keep it subtle) */
.legal-table .header__filter-button:hover,
.legal-table .view-header button:hover,
.legal-table .control-bar button:hover {
  background-color: var(--bg-offwhite) !important;
  border-color: var(--secondary-slate) !important;
  color: var(--primary-navy) !important;
}

/* Fix the icon color inside the button (it's likely an SVG) */
.legal-table .header__filter-button i,
.legal-table .header__filter-button svg,
.legal-table .view-header button i,
.legal-table .view-header button svg {
  color: currentColor !important;
  fill: currentColor !important;
}

/* =========================================
   8. FORM & RESPOND PAGE STYLING
   ========================================= */

/* --- HEADERS --- */
/* Target the "Respond to Questionnaire" and Category headers */
h1, h2, h3, h4 {
  color: var(--primary-navy) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* --- LABELS --- */
/* Make labels ("Company Response", "Upload Documents") look like metadata */
label, .control-label {
  color: var(--secondary-slate) !important;
  font-size: 0.75rem !important; /* Smaller, sharper */
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  margin-bottom: 8px !important;
  display: block;
}

/* --- TEXT INPUTS & TEXT AREAS --- */
/* Transform standard boxes into clean, professional inputs */
input[type="text"], 
input[type="email"], 
textarea, 
.control-input {
  background-color: white !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important; /* More comfortable padding */
  font-family: var(--font-family) !important;
  color: var(--primary-navy) !important;
  font-size: 0.95rem !important;
  line-height: 1.5;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Focus State: The "Navy Glow" when typing */
input[type="text"]:focus, 
textarea:focus, 
.control-input:focus {
  border-color: var(--primary-navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1) !important; /* Subtle navy halo */
}

/* --- FILE UPLOAD ZONE --- */
/* Make it look like a distinct "drop zone" */
.file-upload, 
.control-file-upload {
  background-color: var(--bg-offwhite) !important;
  border: 2px dashed var(--border-light) !important; /* Dashed border = Drop here */
  border-radius: 8px !important;
  padding: 30px !important;
  text-align: center;
  color: var(--secondary-slate) !important;
  transition: all 0.2s ease;
}

.file-upload:hover,
.control-file-upload:hover {
  border-color: var(--primary-navy) !important;
  background-color: #F1F5F9 !important;
}

/* --- STATUS SELECTION LIST --- */
/* Targeting the list of radio options (Pending, Completed, etc.) */
.control-choice-list, .choice-list {
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

.choice-item, .control-choice-list-item {
  border-bottom: 1px solid var(--border-light);
  background: white;
  padding: 12px 16px !important;
  transition: background 0.2s;
}

.choice-item:last-child {
  border-bottom: none;
}

.choice-item:hover {
  background-color: var(--bg-offwhite) !important;
}

/* --- THE SUB-TABLE (Previous Responses) --- */
/* This ensures the table at the bottom matches your main page table */
.element-container table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.element-container table th {
  background-color: var(--bg-offwhite) !important;
  color: var(--secondary-slate) !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  font-weight: 700;
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.element-container table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--primary-navy);
  font-size: 0.9rem;
}

/* =========================================
   9. FOOTER STYLING
   ========================================= */

/* Use this class for your Copyright/Support text element */
.legal-footer {
  text-align: center !important;
  font-size: 0.75rem !important; /* Small 'Legalese' size (approx 12px) */
  color: #94a3b8 !important;      /* Light Slate - readable but ignored */
  
  /* Spacing to push it away from the form */
  margin-top: 40px !important;
  padding-bottom: 40px !important;
  
  /* Optional: A subtle divider line above the footer */
  border-top: 1px solid #E2E8F0 !important;
  padding-top: 24px !important;
  
  width: 100%;
}

/* Styling links inside the footer (e.g., Privacy Policy) */
.legal-footer a {
  color: #64748B !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.legal-footer a:hover {
  color: #0F172A !important; /* Dark Navy on hover */
  text-decoration: underline !important;
}

/* =========================================
   10. THE RESPOND PAGE "PAPER" CARD
   ========================================= */

/* This targets the Column element you created (Class: legal-paper) */
.legal-paper {
  background-color: white !important;
  border: 1px solid var(--border-light) !important;
  border-top: 4px solid var(--primary-navy) !important; /* Brand accent */
  border-radius: 8px !important;
  
  /* The Shadow creates the "Document" feel */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.03) !important;
  
  /* Internal spacing so text doesn't hit the edges */
  padding: 40px !important;
  
  /* Center the card on the screen (optional, restricts width) */
  max-width: 900px !important;
  margin: 20px auto !important; /* Centers it horizontally */
}

/* Fix the Header spacing inside the card */
.legal-paper h1, 
.legal-paper h2, 
.legal-paper h3 {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
}

/* Style the "Question Text" (The text paragraphs inside the card) */
.legal-paper p, 
.legal-paper .typography-element {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #334155 !important;
  margin-bottom: 24px !important;
}

/* Force the File Upload to look distinct */
.legal-paper .file-upload-element,
.legal-paper div[data-element="file-upload"] {
  background: #F8FAFC !important;
  border: 2px dashed #CBD5E1 !important;
  padding: 20px !important;
  border-radius: 6px;
  text-align: center;
  margin-bottom: 24px !important;
}

/* =========================================
   11. FINAL POLISH (Buttons & Text)
   ========================================= */

/* --- THE SUBMIT BUTTON --- */
/* Target the primary action button inside the paper card */
.legal-paper button.button {
  background-color: var(--primary-navy) !important;
  border-color: var(--primary-navy) !important;
  color: white !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 12px 24px !important;
  border-radius: 6px !important; /* Matches your input boxes */
  width: 100%; /* OPTIONAL: Makes button full-width for mobile friendliness */
  margin-top: 16px;
  transition: all 0.2s ease;
}

.legal-paper button.button:hover {
  background-color: #1E293B !important; /* Slightly lighter Navy */
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.2);
  transform: translateY(-1px); /* Subtle lift effect */
}

/* --- THE QUESTION DATA STYLING --- */
/* This targets the text at the top of the card to make it readable */

/* 1. Make the "Category" label bold and dark */
.legal-paper p:first-of-type {
  font-weight: 700 !important;
  color: var(--primary-navy) !important;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

/* 2. Style the "Request Item" text (English & Japanese) */
.legal-paper .typography-element, 
.legal-paper p {
  font-size: 1.05rem !important; /* Larger than before */
  line-height: 1.7 !important;    /* More breathing room */
  color: #1e293b !important;      /* Dark Slate */
  margin-bottom: 16px !important;
}

/* 1. Global Reset & Background */
body, html {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f7fa; /* Light gray background for contrast */
}

/* 2. Center the Login Form (The "Card" Layout) */
/* Assuming the form is wrapped in a container. If not, we target the body's direct child */
form, .auth__wrapper, .login-page-container { 
    max-width: 400px;
    margin: 10vh auto; /* 10% from top, centered horizontally */
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle drop shadow */
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

/* 3. Add Branding via CSS (Since we can't edit HTML easily) */
form::before {
    content: "Due Diligence Portal";
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
    text-align: center;
}

form::after {
    content: "Legal Due Diligence Questionnaire";
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
    text-align: center;
    order: -1; /* Ensures this appears below the title but above inputs */
}

/* 4. Style the Labels */
label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

/* 5. Style the Input Fields */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't break width */
    font-size: 14px;
    transition: border-color 0.2s ease;
}

input:focus {
    outline: none;
    border-color: #4472c4; /* Matching the blue from your dashboard filter */
    box-shadow: 0 0 0 3px rgba(68, 114, 196, 0.1);
}

/* 6. Style the Button */
button, input[type="submit"], .button {
    width: 100%;
    padding: 12px;
    background-color: #4472c4; /* Corporate Blue from Dashboard */
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #365da1; /* Slightly darker blue on hover */
}