/*=============================================================================
  AIsapiens/static/css/base.css

  PURPOSE:
  - Reset/normalize defaults
  - Define global variables (typography, spacing, colors, breakpoints)
  - Apply base element styles (html, body, headings, paragraphs, lists, links)
  - Provide lightweight utility classes (e.g., numeric formatting, activity labels)

  SECTIONS:
  1. Reset & Box Sizing
  2. Global Variables
     2.1 Typography (font sizes, families)
     2.2 Spacing (margins, paddings)
     2.3 Colors (text, background, accents, borders)
     2.4 Breakpoints (if needed)
     2.5 Theme Overrides (dark theme)
  3. Base Element Styles
     3.1 HTML & Body
     3.2 Headings, Paragraphs, Lists
     3.3 Links
     3.4 Images & Media
  4. Utility Classes
     4.1 Typography Utilities
     4.2 Layout Utilities (if any)
     4.3 Component‐specific Utilities (numeric, activity labels)
=============================================================================*/


/*=============================================================================
  1. Reset & Box Sizing
-----------------------------------------------------------------------------*/

/* 
  1.1. Remove default margin/padding from html/body
  1.2. Ensure every element uses border-box so width/height include padding & border
*/
html, body {
  height: 100%;                 /* Make html/body fill viewport */
  margin: 0;                    /* Remove default browser margin */
  padding: 0;                   /* Remove default browser padding */
}

*, *::before, *::after {
  box-sizing: border-box;       /* Include padding & border in element's total size */
}


/*=============================================================================
  2. Global Variables
-----------------------------------------------------------------------------*/

/* 
  2.1. Typography
  • Define a scale of font sizes for consistent use across the site.
  • Avoid hard‐coded font sizes elsewhere by referring to these variables.
*/
:root {
  /* Font Family */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 
                     Consolas, 'Courier New', monospace;
  /* Font Sizes */
  --font-base:    1rem;    /* 16px (the root reference) */
  --font-small:   0.875rem;/* 14px */
  --font-medium:  1rem;    /* 16px */
  --font-large:   1.25rem; /* 20px */
  --font-xlarge:  1.5rem;  /* 24px */
  --font-xxlarge: 2rem;    /* 32px */

  /* Line Heights */
  --line-height-normal: 1.5;
  --line-height-heading: 1.25;
}

/* 
  2.2. Spacing
  • A modular spacing scale (xs, sm, md, lg).
  • Use these variables for margins/paddings instead of hard‐coding pixels.
*/
:root {
  --space-padding: 0.1rem;
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 4rem;     /* 64px */
  --space-xxs: 0.125rem;                  /* for very fine layout spacing */


  /* Example custom spacing (if truly needed) */
  --data-row-height: 2rem; /* Data row height - it was 33rem */
  --site-margin: var(--space-md);
  --row-textarea-height: 33rem;
  --button-min-width:   5.5rem;
  }

/* margins */
.mt-sm { margin-top: 10px; }
.mb-sm { margin-bottom: 10px; }
.mt-md { margin-top: 20px; }
.mb-md { margin-bottom: 20px; }

/* REMOVED: Dark theme utility classes for clean white theme */

/* 
  2.3. Colors
  • Define semantic names for text, background, accents, border, etc.
  • Avoid magic hex codes in the stylesheet.
*/
:root {
  /* Text Colors */
  --color-text-primary:    #0b0b0b;  /* Default body text */
  --color-text-secondary:  #2c3e50;  /* Subheadings, secondary text */
  --color-text-muted:      #6b7280;  /* Muted/placeholder text */
  --color-text-inverse:    #ffffff;  /* For dark backgrounds */

/* Darker hover/focus variants for status colors */
--color-success-dark:    #218838;  /* darker shade of --color-success */
--color-danger: #ea4335;
--color-danger-dark:     #e05555;  /* darker shade of --color-danger */
--color-info-dark:       #3a78c2;  /* darker shade of --color-info */
--accent-blue: var(--color-accent-blue);
--accent-purple: var(--color-accent-purple);


/* "Light" overlays for badges and backgrounds */
--accent-blue-light:     rgba(76, 111, 255, 0.1);
--accent-green-light:    rgba(61, 213, 152, 0.1);
--scrollbar-thumb-bg:     rgba(0, 0, 0, 0.2);

/* Alert text/background shades */
--color-alert-warning:       #856404;  /* darker warning text */
--color-alert-warning-light: #fff3cd;  /* pale yellow background */
--color-alert-info:          #0c5460;  /* darker info text */
--color-alert-info-light:    #d1ecf1;  /* pale blue background */
--color-alert-skip:          #6b7280;  /* muted gray text for skip messages */
--color-alert-skip-light:    #f9fafb;  /* very light gray background for skip messages */

  /* Background Colors - CLEAN WHITE THEME */
  --color-bg-light:    #fafafa;  /* Page background */
  --color-bg-dark:     #ffffff;  /* CHANGED: Now white for clean theme */
  --color-bg-darker:   #f8f9fa;  /* CHANGED: Light gray for clean theme */
  --color-bg-card:     #ffffff;  /* CHANGED: White cards for clean theme */
  --color-bg-surface:  #ffffff;  /* Surface/table background */
  --color-bg-white:    #ffffff;  /* Pure white */

  /* Accent Colors */
  --color-accent-purple: #6c5dd3;
  --color-accent-green:  #3dd598;
  --color-accent-blue:   #4c6fff;
  --color-accent-red:    #dc3545;

  /* Link Colors */
  --color-link:        #0069d9;
  --color-link-hover:  #0056b3;

  /* Status Colors */
  --color-success: #28a745;
  --color-danger:  #ff6b6b;
  --color-info:    #4f8edc;
  --color-warning: #ffc107;
  --primary:       var(--color-accent-purple);
  --primary-dark:  #5751d6;

  --color-dark: #1a1a1a; /* or appropriate dark shade for contrast */

  --color-accent-blue-dark: #3a5ce0;      /* example darker tone */
  --color-alert-error-light: #f8d7da;     /* light red background */
  --color-success-light: #d4edda;         /* light green background */
  --color-white: #ffffff;                 /* if you choose to keep it */
  --bg-card: var(--color-bg-card);        /* or rename usage to match existing var */
  --bg-white: var(--color-bg-white);      /* or remove in favor of existing */
  --bg-light: var(--color-bg-light);      /* needed if status-badge uses it */
  
/* Misc / Border Colors */
--color-border:   #e5e7eb;  /* Light gray border */
--color-hover-bg: #f3f4f6;  /* Hover background */

 /* Extra background tones */
--color-bg-lighter:   #f9f9f9;  /* for light containers (e.g., message lists) */
--color-bg-header:    #f8f9fa;  /* for table/card headers */

--text-primary: var(--color-text-primary);
--text-secondary: var(--color-text-secondary);
--text-muted: var(--color-text-muted);
--text-dark: #000000;     /* or a darker shade if needed */
--text-white: #ffffff;

--bg-hover: var(--color-hover-bg);  /* #f3f4f6 as defined */
--bg-darker: #f8f9fa;  /* CHANGED: Light gray for clean theme */
--bg-dark: #ffffff;    /* CHANGED: White for clean theme */

--border-color: var(--color-border);

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

--color-secondary: #adb5bd; /* light gray or appropriate muted tone */

--surface-color: var(--color-bg-white);         /* or use a neutral base */
--surface-color-light: var(--color-bg-light);   /* for lighter input backgrounds */
--text-color: var(--color-text-primary);        /* aligns with your text system */

--highlight-bg-yellow: #fff8cc;
--highlight-border-yellow: #f0e68c;

}

:root {
  /* Buttons */
  --button-small-padding-vertical:   0.4rem;
  --button-small-padding-horizontal: 0.75rem;
  --button-small-font-size:          0.65rem;
  --button-clear-font-weight:        800;
  
  
}


/* 
  2.4. Breakpoints (optional)
  • Define commonly used media query breakpoints.
  • Refer to these in responsive CSS rather than hard‐coding widths.
*/
:root {
  --breakpoint-xs:  320px;
  --breakpoint-sm:  576px;
  --breakpoint-md:  768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* 
  2.5. REMOVED: Dark Theme Overrides - CLEAN WHITE THEME ONLY
  • All dark theme CSS variable overrides removed for clean white background
*/

/* 
  2.6. Border radii
*/
:root {
  --border-radius-sm:    0.25rem;
  --border-radius:       0.5rem;
  --border-radius-lg:    1rem;
}

/* 
  2.7. Shadows
*/
:root {
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.15);
}


/*=============================================================================
  3. Base Element Styles
-----------------------------------------------------------------------------*/

/* 
  3.1. HTML & Body
  • Set default font, line‐height, background, color.
  • Ensures the app uses system fonts by default.
*/
html, body {
  font-family: var(--font-family-base);
  font-size: var(--font-base);        /* 16px by default */
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
}

/* 
  3.2. Headings
  • Define consistent margins, font‐sizes, line‐heights.
  • Use rem-based sizes referring to variables.
*/
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-sm) 0; /* Bottom margin */
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}
h1 { font-size: var(--font-xxlarge); }
h2 { font-size: var(--font-xlarge);  }
h3 { font-size: var(--font-large);   }
h4 { font-size: var(--font-medium);  }
h5 { font-size: var(--font-small);   }
h6 { font-size: var(--font-small);   /* same as h5 */ }

/* REMOVED: White text utilities for clean white theme */

/* 
  3.3. Paragraphs & Text
  • Default spacing for paragraphs, inline elements.
*/
p {
  margin: 0 0 var(--space-md) 0; /* Vertical rhythm: bottom margin */
}
small {
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

.text-white {
  color: var(--color-text-inverse);
}

/* 
  3.4. Lists
  • Default styling for ul/ol and their list items.
*/
ul, ol {
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-lg); /* Indented list */
}
li {
  margin-bottom: var(--space-xs);
}

/* 
  3.5. Links
  • Base link color + hover/focus states.
*/
a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* 
  3.6. Images & Media
  • Ensure images don't overflow their containers.
*/
img, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/*=============================================================================
  4. Utility Classes
-----------------------------------------------------------------------------*/

/* 
  4.1. Typography Utilities
  • .numeric - monospace styling for numeric values
  • .text-center - center‐align text
  • .text-right  - right‐align text
*/
.numeric {
  font-family: monospace;
  font-size: var(--font-small);
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* 
  4.2. Activity Label Utilities
  • .activity-type - label styling for "type" (white text, small font)
  • .activity-time  - label styling for timestamps (muted color, smaller font)
  • These should use the color variables instead of hard‐coding.
*/
.activity-type {
  color: var(--color-text-inverse);  /* white */
  font-size: 0.85rem; /* If you want to standardize, consider adding --font-activity */
}

.activity-time {
  color: var(--color-text-muted); /* Muted gray */
  font-size: 0.8rem; /* Consider adding --font-timestamp */
}

/* 
  4.3. Visibility Utilities
  • .sr-only - screen reader only (for accessibility)
  • .hidden   - completely hide element
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

/*=============================================================================
  NOTES & RECOMMENDATIONS
-----------------------------------------------------------------------------*/
/*
1. Avoid Hard‐coded Values
   • All font sizes should refer to --font- variables.
   • If you need a new font size (e.g., 0.85rem or 0.8rem), add it under :root 
     (e.g., --font-activity: 0.85rem; --font-timestamp: 0.8rem). 
   • Colors used in utilities should reference --color- variables. If a new shade 
     is needed (e.g., #b3b3b3), define --color-text-muted instead of hard‐coding.

2. Eliminate Duplications
   • If multiple selectors share the same margin, padding, or font-size, centralize 
     that property into a variable or a shared utility (e.g., .mb-md { margin-bottom: var(--space-md); }).

3. Standardize Naming
   • Use semantic prefixes: "color-…" for color variables, "font-…" for font sizes, 
     "space-…" for spacing, etc. 
   • Utility classes should be generic (e.g., .text-center, .text-right) and avoid 
     coupling to a specific component.

4. Expand Base Element Styles as Needed
   • Currently, basic styling for headings, paragraphs, lists, and links is provided. 
   • If you need form element resets (input, select, textarea), add them here under 
     a "Form Elements" subsection.

5. Keep File Focused on "Base" Concerns
   • Do not place component‐specific styles (buttons, cards, form-groups) here-those 
     belong in components.css. 
   • Do not place layout containers (flex/grid wrappers used across many pages) here-those 
     belong in layout.css. 
   • Do not place page‐specific overrides (e.g., "scheda prodotto" header, "license-form" tweaks) 
     here-those belong in pages.css.
*/