/* ================================================================
   ⚠️ 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-header.css - Header bar, page layout, page titles
      • components/navigation.css - Nav menus, dropdowns, user profile, sidebar
      • components/navigation-footer.css - Tabs, breadcrumbs, footer, pagination
      • 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-header.css';  /* Header bar, page layout, page titles */
@import 'components/navigation.css';           /* Nav menus, dropdowns, user profile, sidebar */
@import 'components/navigation-footer.css';  /* Tabs, breadcrumbs, footer, pagination */
@import 'components/navigation-fixed.css';   /* 3-row navigation structure overrides */
@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 */

body.draw-signature {
    background-color: var(--bg-page, #0a0a0a);
    padding: 24px;
    margin: 0;
}

.draw-signature h1.Title {
    color: var(--text-primary, #ffffff);
    font-family: var(--font-sans);
    font-size: 1.75rem;
    margin: 0 0 8px 0;
}

.draw-signature .info {
    color: var(--text-muted, rgba(255, 255, 255, 0.7));
    font-family: var(--font-sans);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.draw-signature .button-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.draw-signature .btn-save,
.draw-signature .btn-clear {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 14px 48px;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.draw-signature .btn-save:hover,
.draw-signature .btn-clear:hover {
    filter: brightness(1.1);
}

.draw-signature .btn-save {
    background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
    color: white;
}

.draw-signature .btn-clear {
    background: linear-gradient(180deg, #ef5350 0%, #d32f2f 100%);
    color: white;
}

.draw-signature .signature-canvas-wrapper {
    border: 2px solid var(--border-strong, rgba(255, 255, 255, 0.2));
    border-radius: 12px;
    background-color: #fff;
    display: inline-block;
    overflow: hidden;
}

.draw-signature .message-success,
.draw-signature .message-fail {
    font-family: var(--font-sans);
    font-weight: bold;
    font-size: 1.1rem;
}

.draw-signature .message-success {
    color: #4caf50;
}

.draw-signature .message-fail {
    color: #f44336;
}

.draw-signature .message-success span,
.draw-signature .message-fail span {
    color: var(--text-muted, rgba(255, 255, 255, 0.8));
    font-weight: normal;
}