/* ================================================================
   ⚠️ STOP! MANDATORY READING BEFORE EDITING ANY CSS! ⚠️
   ================================================================

   📚 REQUIRED DOCUMENTATION:
   You MUST read /src/Web/J4.Web/UI_DESIGN_SYSTEM.md BEFORE
   making ANY changes to CSS files!

   🎯 CRITICAL REQUIREMENTS:
   =====================================
   1. CSS REUSE PRINCIPLE
      ✓ Check existing component files FIRST
      ✓ Use utility classes when possible
      ✓ Extend existing classes before creating new
      ✗ NEVER create new CSS without user approval

   2. DUAL THEME SUPPORT (MANDATORY!)
      ✓ Must work in BOTH dark and light themes
      ✓ Use CSS variables (they auto-adapt to themes)
      ✓ Test in both themes before committing
      ✗ No hardcoded colors that break themes

   3. COMPONENT ARCHITECTURE
      Check these files BEFORE adding new styles:
      • components/cards.css     - Containers & sections
      • components/tables.css    - Data tables & info tables
      • components/forms.css     - All form controls
      • components/buttons.css   - All button variants
      • components/links.css     - Link colors & styles
      • components/navigation.css - Tabs, menus, headers
      • components/utilities.css - Spacing, display, text
      • components/modals.css    - Dialogs & popups
      • components/action-bar.css - Page action buttons

   ⛔ VIOLATIONS:
   • Creating new CSS without checking existing = BUG
   • Not testing in light theme = BUG
   • Using inline styles = BUG
   • Hardcoding colors instead of variables = BUG

   This prevents CSS bloat and ensures theme compatibility!
   ================================================================ */

/* Import all component files in proper order */
@import 'components/variables.css';
@import 'components/grid.css';
@import 'components/utilities.css';
@import 'components/links.css';
@import 'components/buttons.css';
@import 'components/forms.css';
@import 'components/tables.css';
@import 'components/tree-table.css';
@import 'components/cards.css';
@import 'components/navigation.css';
@import 'components/navigation-fixed.css';  /* 3-row navigation structure */
@import 'components/pagination.css';
@import 'components/action-bar.css';
@import 'components/modals.css';

/* ========== PAGE-SPECIFIC STYLES ========== */
/* Minimal overrides for unique page requirements */

/* Vessel styles moved to component files:
   - Info table styles → tables.css (.info-table)
   - Image modal styles → modals.css (.modal-image)
*/

/* ========== Draw Signature Page ========== */
/* Standalone page for drawing signatures on mobile devices */

.draw-signature .canvas-container {
    margin: 10px;
    border: 1px solid black;
    background-color: ghostwhite;
    display: table;
}

@media screen and (min-width: 61mm) {
    .draw-signature h1 {
        font-size: 2.5em;
    }
    .draw-signature #Save,
    .draw-signature #Clear {
        font-size: 2.5em;
    }
}

.draw-signature span,
.draw-signature h1,
.draw-signature .info {
    font-family: Arial, Tahoma, Verdana, sans-serif;
}

.draw-signature .info {
    color: white;
    font-weight: bold;
    font-size: larger;
    margin-bottom: 10px;
}

.draw-signature .message-success {
    color: green;
    font-weight: bold;
    font-size: larger;
}

.draw-signature .message-fail {
    color: red;
    font-weight: bold;
    font-size: larger;
}

.draw-signature #Save {
    border-color: darkorange;
    background-color: darkorange;
    color: white;
    border-radius: 5px;
}

.draw-signature #Clear {
    border-color: lightgrey;
    background-color: lightgrey;
    color: black;
    border-radius: 5px;
}

.draw-signature h1.Title {
    color: white;
}

body.BackgroundColor.draw-signature {
    background-color: #1D1D1BFF;
}