/* =============================================================================
   AIsapiens/static/css/layout.css

   PURPOSE:
   - Define grid/flex‐container utilities
   - Provide site‐wide wrappers (header, footer, main content, navbars)
   - Page‐level containers (e.g. dashboard, login)
   - Avoid hard‐coded values; use variables for spacing, colors, typography
   ============================================================================= */

/*==============================================================================
  TABLE OF CONTENTS:

  1. NAVBAR (Frontend)
      1. Navigation Link Styles
      2. Navbar Container & Inner Flex
      3. User Menu
  2. DASHBOARD LAYOUT (Frontend)
      1. Dashboard Shell (.my-dashboard-body)
      2. Header Top (branding, logo, title)
      3. Header Divider
      4. Main Content & Message Ordering
      5. User/Org Info Line
      6. Page‐Level Containers (dashboard‐container, system‐overview)
      7. Applications‐List & Scrollbar Styling
      8. App Details Grid & Activity List
      9. Form‐Row Utility
      10. Table Wrapper
      11. Z-index Override (#message-container)
      12. Responsive Tweaks
  3. BACKEND LAYOUT
      1. Backend Shell & Main Content
      2. Backend Navbar
      3. Content Header & Actions
      4. Content Body & Page Wrappers
      5. Utilities (top panel, scrollable list, header bottom, filters bar)
      6. Application & Dashboard‐Specific Grids/Lists
  ============================================================================= */



/*==============================================================================
  1. NAVBAR (Frontend)
==============================================================================*/

/*  1.1. Navigation Link Styles 
       Applies to <nav> anchors and any element with class .nav-link */
       nav a,
       .nav-link {
         margin-right: var(--space-md);
         font-size: var(--font-medium);
         color: var(--color-link);
         text-decoration: none;
         transition: color 0.2s ease;
       }
       nav a:hover,
       nav a:focus,
       .nav-link:hover {
         color: var(--color-link-hover);
         text-decoration: underline;
       }
       
       /*  1.2. Navbar Container & Inner Flex */
       .site-nav {
         background-color: var(--color-bg-white);
         padding: var(--space-md) 0;
         color: var(--color-text-primary);
       }
       .nav-inner {
         max-width: 100%;
         margin: 0 auto;
         padding: 0 var(--space-md);
         display: flex;
         justify-content: space-between;
         align-items: center;
       }
       /* Brand/logo link inside navbar */
       .nav-brand {
         color: var(--color-text-inverse);
         text-decoration: none;
         font-size: var(--font-xlarge);
         font-weight: 700;
       }
       /* Link containers (flex groups) */
       .nav-links {
         display: flex;
         align-items: center;
         gap: var(--space-lg);
         justify-content: flex-end; /* Align everything to the right edge */
         flex: 1; /* Take available space */
       }
       /* Individual nav‐link styling overrides */
       .nav-link {
         color: var(--color-text-secondary);
         padding: var(--space-sm) var(--space-md);
         border-radius: var(--border-radius-sm);
         font-weight: 500;
         transition: background-color 0.2s ease, color 0.2s ease;
       }
       .nav-link:hover {
         background-color: var(--color-bg-light);
         color: var(--color-accent-purple);
       }
       .nav-link.active {
         background-color: var(--color-accent-purple);
         color: var(--color-text-inverse);
       }
       
       /* 1.3. User Menu in Navbar */
       .user-info {
         display: flex;
         align-items: center;
         gap: var(--space-md);
       }
       
       .nav-logout-form {
         position: absolute;
         right: 16px; /* Exact pixel positioning */
         display: flex;
         align-items: center;
       }

       .nav-logout-form button {
         padding: var(--space-sm) var(--space-md);
         height: auto;
         white-space: nowrap;
        margin: 0;
        }

       /*==============================================================================
         2. DASHBOARD LAYOUT (Frontend)
       ==============================================================================*/
       
       /*  2.1. Dashboard Shell */
       .my-dashboard-body {
         width: 100%;  /* Full width instead of 98% */
         max-width: 100%;
         margin: var(--space-md) auto;
         min-height: calc(100vh - var(--space-lg));
         display: flex;
         flex-direction: column;
         background-color: var(--color-bg-white);
         box-shadow: var(--shadow-sm);
         border-radius: var(--border-radius);
         height: 100vh;
         overflow: auto;
       }
       
       /*  2.2. Header Top (branding, logo, title) */
       .header-top {
         position: relative !important;
         margin: 0;
        background-color: var(--color-bg-white);
         padding: var(--space-sm) var(--space-md);
        display: flex;
        align-items: center;
        justify-content: space-between;
         width: 100%;
         box-sizing: border-box;  /* Include padding in width */
         padding-right: 120px !important; /* Reserve space for logout button */
       }
       /* Logo + branding container */
       .branding {
         display: flex;
         align-items: center;
         gap: var(--space-md);
       }
       .dashboard-logo {
         height: 2.5rem; /* 40px */
       }
       .app-title {
         font-size: var(--font-xlarge); /* 1.5rem */
         font-weight: 700;
         color: var(--color-text-secondary);
       }
       
       /*  2.3. Header Divider (thin accent line) */
       .header-divider {
        position: static !important;
        border: none;
        border-top: 1px solid var(--color-accent-purple);
        margin: 0;
        height: 1px;
        background-color: var(--color-border);
       }
       
       /*  2.4. Main Content Area */
       .site-main {
         flex: 1;
         padding: 0;
         background-color: var(--color-bg-white);
       }
       
       /*  2.5. User/Org Info Line */
       .user-org-info {
         display: flex;
         align-items: center;
         gap: var(--space-xs);
         margin-right: var(--space-md); /* Add space between info and logout button */
       }
       .user-email {
         font-size: var(--font-medium);
         color: var(--color-text-primary);
       }
       .separator {
         color: var(--color-text-secondary);
         padding: 0 var(--space-xs);
       }
       
       /*  2.6. Message Container Ordering */
       #message-container {
         order: -1; /* move above other flex items if inside a flex parent */
       }
       
       /*  2.7. Page‐Level Containers */
       .dashboard-container {
         padding: var(--space-lg);
         width: 100%;
         margin: 0 auto;
         overflow-x: auto;
       }
       .system-overview {
         background-color: var(--color-bg-white);
         border-radius: var(--border-radius);
         padding: var(--space-md);
         box-shadow: var(--shadow-sm);
         margin-bottom: var(--space-lg);
       }
       
       /*  2.8. Applications List Panel */
       .applications-list {
         display: flex;
         flex-direction: column;
         gap: var(--space-md);
         max-height: calc(100vh - 18.75rem); /* (300px ≈ 18.75rem) */
         overflow-y: auto;
         padding-right: var(--space-md);
       }
       /* Scrollbar styling for .applications-list */
       .applications-list::-webkit-scrollbar {
         width: 0.5rem; /* 8px */
       }
       .applications-list::-webkit-scrollbar-track {
         background: var(--color-bg-lighter);
         border-radius: var(--border-radius-sm);
       }
       .applications-list::-webkit-scrollbar-thumb {
         background: var(--color-border);
         border-radius: var(--border-radius-sm);
       }
       .applications-list::-webkit-scrollbar-thumb:hover {
         background: var(--color-text-secondary);
       }
       
       /*  2.9. App Details Grid & Activity List */
       .app-details {
         display: grid;
         grid-template-columns: 2fr 1fr;
         gap: var(--space-md);
         margin-top: var(--space-md);
       }
       @media (max-width: var(--breakpoint-md)) {
         .app-details {
           grid-template-columns: 1fr;
         }
       }
       .usage-chart,
       .activity-list {
         background-color: var(--color-bg-lighter);
         border-radius: var(--border-radius-sm);
         padding: var(--space-md);
       }
       .activity-list {
         max-height: 18.75rem; /* 300px */
         overflow-y: auto;
       }
       .activity-item {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: var(--space-sm);
         border-bottom: 1px solid var(--color-border);
       }
       .activity-item:last-child {
         border-bottom: none;
       }
       
       /*  2.10. Form‐Row Utility */
       .form-row {
         display: flex;
         gap: var(--space-sm);
         align-items: center;
         background-color: var(--surface-color-light);
         padding: var(--space-lg);
         border-radius: var(--border-radius);
         margin-top: var(--space-lg);
       }
       .form-row input {
         flex: 1;
         padding: var(--space-sm) var(--space-md);
         border: 1px solid var(--surface-color-light);
         border-radius: var(--border-radius-sm);
         background-color: var(--surface-color);
         color: var(--text-color);
       }
       
       /*  2.11. Table Wrapper - CLEAN WHITE THEME */
       .table-container {
         width: 100%;
         overflow-x: auto;
         background-color: var(--color-bg-white);
         border-radius: var(--border-radius);
         box-shadow: var(--shadow-md);
         margin: var(--space-md) 0;
         padding: var(--space-xs); /* 1px ≈ 0.0625rem; use xs or convert exact pixel if needed */
       }
       
       /*  2.12. Page‐Scoped z-Index Hack */
       #message-container {
         z-index: 9999 !important;
       }
       
       /*  2.13. Responsive Tweaks for Layout Containers */
       @media (max-width: var(--breakpoint-lg)) {
         .dashboard-container {
           padding: var(--space-md);
         }
       }
       @media (max-width: var(--breakpoint-md)) {
         .dashboard-container {
           padding: var(--space-md);
         }
         /* Collapse metrics‐grid if used within dashboard */
         .metrics-grid {
           grid-template-columns: 1fr;
         }
       }
       
       
       /*==============================================================================
         3. BACKEND LAYOUT
       ==============================================================================*/
       
       /*  3.1. Backend Shell & Main Content - CLEAN WHITE THEME */
       .backend-layout {
         background-color: var(--color-bg-white);
         min-height: calc(100vh - 3.5625rem); /* 57px ≈ 3.5625rem */
         padding: 0 var(--space-md);
       }
       .main-content {
         max-width: 100%;
         margin: 0 auto;
         width: 100%;
       }
       
       /*  3.2. Backend Navbar */
       .backend-layout .site-nav {
         background-color: var(--color-bg-white);
         border-bottom: 1px solid var(--color-border);
         padding: var(--space-sm) var(--space-lg);
       }
       .backend-layout .nav-inner {
         display: flex;
         align-items: center;
         max-width: 100%;
         margin: 0 auto;
         gap: var(--space-md);
       }
       .nav-brand {
         display: flex;
         align-items: center;
         gap: var(--space-md);
         flex-shrink: 0;
       }
       .nav-logo {
         height: 2.5rem; /* 40px */
         width: auto;
       }
       .org-name {
         font-size: var(--font-medium);
         color: var(--color-text-secondary);
         font-weight: 500;
         white-space: nowrap;
       }
       .nav-links {
         display: flex;
         align-items: center;
         gap: 1.5rem; /* var(--space-lg) = 2rem; use literal or introduce --space-lg-med */
         margin: 0 var(--space-lg);
       }
       /* Backend navigation link */
       .backend-nav-link,
       .backend-layout .nav-link {
         color: var(--color-text-secondary);
         text-decoration: none;
         font-size: var(--font-large);
         font-weight: 500;
         white-space: nowrap;
         background: none;
         border: none;
         padding: 0;
         margin: 0;
         transition: color 0.2s ease;
       }
       .backend-nav-link:hover,
       .backend-layout .nav-link:hover {
         color: var(--color-accent-purple);
         text-decoration: underline;
       }
       .backend-nav-link.active,
       .backend-layout .nav-link.active {
         color: var(--color-accent-blue);
         font-weight: 600;
       }
       
       /* User Menu at right of backend navbar */
       .user-menu {
         display: flex;
         align-items: center;
         gap: var(--space-md);
         margin-left: auto;
         padding-left: var(--space-md);
         border-left: 1px solid var(--color-border);
       }
       .nav-greeting {
         color: var(--color-text-secondary);
         font-size: var(--font-small);
         white-space: nowrap;
       }
       
       /*  3.3. Content Header & Actions */
       .content-header {
         padding: var(--space-lg) var(--space-lg);
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: var(--space-lg);
         background: transparent;
         border: none;
       }
       .content-header h1 {
         margin: 0;
         color: var(--color-text-primary);
         font-size: var(--font-xxlarge);
         font-weight: 600;
       }
       .header-actions {
         display: none; /* show via JS if necessary */
       }
       
       /*  3.4. Content Body & Page Wrappers */
       .content-body {
         width: 100%;
         margin: 0 auto;
         padding: 0 var(--space-md);
         box-sizing: border-box;
       }
       /* Backend‐specific page wrappers - CLEAN WHITE THEME */
       .dashboard-container {
         width: 100%;
         background-color: var(--color-bg-white);
         color: var(--color-text-primary);
         padding: var(--space-md);
         border-radius: var(--border-radius);
       }
       .system-overview {
         background: #f8f9fa;  /* Light grey background for better separation */
         border-radius: var(--border-radius-lg);
         padding: var(--space-lg);  /* More padding for better spacing */
         margin-bottom: var(--space-lg);
         border: 2px solid #dee2e6;  /* Thicker, more visible border */
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* Enhanced shadow for depth */
       }
       .system-overview h2 {
         color: var(--color-text-primary);
         margin-bottom: var(--space-lg);
         font-size: var(--font-xlarge);
         border-bottom: 1px solid var(--color-border);
         padding-bottom: var(--space-sm);
       }
       
       /*  3.5. Utilities (Sticky Panel, Scrollable List, Header Bottom, Filters Bar) */
       /* Pin any page's top panel to viewport */
       .top-panel {
         position: sticky;
         top: 0;
         z-index: 900;
         background-color: var(--color-bg-white);
         border-bottom: 1px solid var(--color-border);
       }
       /* Any flex container that should scroll its list portion */
       .scrollable-list {
         flex: 1 1 auto;
         overflow-y: auto;
       }
       /* Secondary header row (below .header-top) */
       .header-bottom {
         display: flex;
         align-items: center;
         justify-content: space-between; /* Changed from flex-start to space-between */
         padding: var(--space-sm) var(--space-md);
         background-color: var(--color-bg-light);
         border-bottom: 1px solid var(--color-border);
         width: 100%;
         box-sizing: border-box;
         gap: var(--space-sm); /* Small gap between sections */
       }
       /* Generic filters bar at top of a dashboard */
       .dashboard-filters {
         padding: var(--space-sm) var(--space-md);
         background-color: var(--color-bg-light);
         border-bottom: 1px solid var(--color-border);
       }
       
       /*  3.6. Application & Dashboard‐Specific Grids/Lists */
       /* Scrollable app list wrapper (backend) */
       .applications-list {
         display: flex;
         flex-direction: column;
         gap: var(--space-md);
         overflow-x: auto;
         margin: 0 calc(-1 * var(--site-margin));
         padding: 0 var(--site-margin);
       }
       /* App status display (inline flex) */
       .app-status {
         display: flex;
         align-items: center;
       }
       /* App details container (backend) */
       .app-details {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: var(--space-md);
         margin-bottom: var(--space-md);
       }
       /* If .app-details should be flex on larger screens */
       @media (min-width: var(--breakpoint-md)) {
         .app-details {
           display: flex;
           gap: var(--space-lg);
           margin-bottom: var(--space-md);
         }
       }
       
       /* Usage meter (backend) */
       .usage-meter {
         width: 100%;
         display: flex;
         flex-direction: column;
         gap: var(--space-xs);
       }
       
       /* Actions Bar */
       .actions-bar {
         padding: var(--space-lg) var(--space-lg);
         background-color: var(--color-bg-light);
         border-radius: var(--border-radius);
         margin-bottom: var(--space-lg);
         display: flex;
         justify-content: flex-end;
         gap: var(--space-lg);
       }
       
       /* Organization Actions */
       .org-actions {
         display: flex;
         align-items: center;
         gap: var(--space-lg);
       }
       
       /* App Header */
       .app-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: var(--space-md);
       }
       
       /* Section Header */
       .section-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: var(--space-lg);
       }
       .section-actions {
         display: flex;
         gap: var(--space-lg);
         align-items: center;
       }
       
       /*  3.7. Misc Responsive Tweaks */
       @media (max-width: var(--breakpoint-md)) {
         .organizations-list {
           padding: var(--space-md);
         }
         .contact-info {
           display: grid;
           grid-template-columns: 1fr;
         }
         .app-metrics {
           flex-wrap: wrap;
         }
       }
       
       /*  3.8. Monitoring & Metrics Layout */
       .monitoring-grid {
         display: flex;
         flex-direction: column;
         gap: var(--space-xl); /* 4rem */
         margin-bottom: var(--space-lg);
         width: 100%;
       }
       @media (min-width: var(--breakpoint-md)) {
         .monitoring-grid {
           gap: var(--space-md); /* 1rem */
         }
       }
       .metrics-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: var(--space-md);
       }
       .dashboard-applications {
         display: flex;
         flex-direction: column;
         width: 100%;
         margin-bottom: var(--space-lg);
       }
       
       .alert-timestamp {
        display: block;
        font-size: var(--font-small);
        color: var(--color-text-secondary);
        margin-bottom: var(--space-xs);
       }

       /* Metrics Row (four‐column grid) */
       .metrics-row {
         display: grid;
         grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: var(--space-md);
         max-width: 100%;       /* 1200px */
         margin: 0 auto var(--space-lg);
         padding: 0 var(--space-md);
         box-sizing: border-box;
       }
       
       /* Command Section (wrap‐flex container) */
       .command-section-applications {
         display: flex;
         flex-wrap: wrap;
         gap: var(--space-md);
         max-width: 100%;       /* 1200px */
         margin: 0 auto;
         padding: 0 var(--space-md);
         box-sizing: border-box;
       }
       
       .center-content {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .inline-form-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
      }
      
      .inline-form-row label {
        min-width: 180px;
        font-weight: 500;
        color: var(--color-text-primary);
      }
      
      .inline-form-row .form-control {
        flex: 1;
        padding: 6px 10px;
      }
      
      /* Left actions container (e.g. Upload, Download, Delete buttons) */
      .left-actions {
        display: flex;
        align-items: center;
        gap: var(--space-md);
      }
      
      /* Right actions container (e.g. Run button) */
      .right-actions {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin-left: auto; /* Push to the right side */
        text-align: right;
      }
      
      .right-actions button,
      .right-actions .btn {
        margin: 0;
        white-space: nowrap;
      }
      
      /* User actions container (e.g. Run button in SchedaProdotto) */
      .user-actions {
        position: absolute;
        right: 16px; /* Exact pixel positioning - same as logout and right-actions */
        display: flex;
        align-items: center;
        gap: var(--space-md);
      }

      .user-actions button,
      .user-actions .btn {
        margin: 0;
        white-space: nowrap;
      }