/* Mac desktop app styling */
:root {
    --mac-background: #f5f5f7;
    --mac-card: #ffffff;
    --mac-border: rgba(0, 0, 0, 0.06);
    --mac-shadow: rgba(0, 0, 0, 0.05);
    --mac-primary: #0071e3;
    --mac-secondary: #6e6e73;
    --mac-danger: #ff3b30;
    --mac-success: #34c759;
    --mac-warning: #ff9500;
    --mac-focus: rgba(0, 113, 227, 0.15);
}
/* Active state for action buttons */
  .btn.active {
    box-shadow: inset 0 0 0 2px var(--mac-primary);
    background-color: rgba(0, 113, 227, 0.1);
  }
  
  .btn-primary.active {
    background-color: #0058b6;
  }
  
  .btn-outline-primary.active {
    background-color: rgba(0, 113, 227, 0.2);
  }
  
  .btn-outline-warning.active {
    background-color: rgba(255, 149, 0, 0.2);
  }
  
  .btn-outline-success.active {
    background-color: rgba(52, 199, 89, 0.2);
  }
  
  .btn-success.active {
    background-color: #2aa84a;
  }
  
  /* Base layout */
  body {
    background-color: var(--mac-background);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", "San Francisco", Helvetica, Arial, sans-serif;
    color: #1d1d1f;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  
  /* Main window styling */
  .page {
    background-color: #F5F5F7;
    border-radius: 10px;
    box-shadow: 0 10px 40px var(--mac-shadow);
    /*max-width: 1400px;
    margin: 20px auto;*/
    overflow: hidden;
  }
  
  .page-wrapper {
    min-height: calc(100vh - 100px);
    padding-bottom: 20px;
  }
  
  /* Top navbar resembling macOS menu bar */
  .navbar {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--mac-border);
    padding: 0.5rem 1rem;
  }
  
  #landing-content > .navbar-brand{
    margin-top: 3%;
  }
  .navbar-brand {
    font-weight: 500;
    letter-spacing: -0.5px;
  }
  
  /* Card styling like macOS panels */
  .card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--mac-shadow);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
  }
  
  .card:hover {
    box-shadow: 0 5px 15px var(--mac-shadow);
  }
  
  .card-header {
    background: transparent;
    border-bottom: 1px solid var(--mac-border);
    padding: 12px 16px;
    font-weight: 500;
  }
  
  .card-title {
    font-weight: 500;
    margin-bottom: 0;
    letter-spacing: -0.5px;
  }
  
  /* macOS-like buttons */
  .btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.2s;
    box-shadow: none;
    border: none;
  }
  
  .btn:active {
    transform: scale(0.97);
  }
  
  .btn-primary {
    background-color: var(--mac-primary);
    color: white;
  }
  
  .btn-primary:hover, .btn-primary:focus {
    background-color: #0058b6;
    transform: translateY(-1px);
  }
  
  .btn-outline-primary {
    color: var(--mac-primary);
    border: 1px solid var(--mac-primary);
  }
  
  .btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: rgba(0, 113, 227, 0.1);
    color: var(--mac-primary);
  }
  
  .btn-success {
    background-color: var(--mac-success);
  }
  
  .btn-outline-success {
    color: var(--mac-success);
    border: 1px solid var(--mac-success);
  }
  
  .btn-outline-success:hover, .btn-outline-success:focus {
    background-color: rgba(52, 199, 89, 0.1);
    color: var(--mac-success);
  }
  
  .btn-warning {
    background-color: var(--mac-warning);
  }
  
  .btn-outline-warning {
    color: var(--mac-warning);
    border: 1px solid var(--mac-warning);
  }
  
  .btn-outline-warning:hover, .btn-outline-warning:focus {
    background-color: rgba(255, 149, 0, 0.1);
    color: var(--mac-warning);
  }
  
  .btn-outline-danger {
    color: var(--mac-danger);
  }
  
  .btn-outline-danger {
    border: 1px solid var(--mac-danger);
  }
  
  .btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--mac-danger);
  }
  
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* macOS form controls */
  .form-control, .form-select {
    border-radius: 8px;
    border-color: var(--mac-border);
    padding: 10px 12px;
    box-shadow: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: rgba(242, 242, 247, 0.5);
  }
  
  .form-control:focus, .form-select:focus {
    border-color: var(--mac-primary);
    box-shadow: 0 0 0 4px var(--mac-focus);
    background-color: #fff;
  }
  
  .form-label {
    font-weight: 500;
    color: #3d3d3f;
    font-size: 0.9rem;
  }
  
  /* Custom file input */
  input[type="file"] {
    border: 2px dashed #c7c7cc;
    background-color: rgba(242, 242, 247, 0.5);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s;
  }
  
  input[type="file"]:hover {
    border-color: var(--mac-primary);
    background-color: rgba(0, 113, 227, 0.05);
  }
  
  /* Tabs styling like macOS */
  .nav-tabs {
    border-bottom: none;
    margin-bottom: 15px;
  }
  
  .nav-tabs .nav-link {
    border: none;
    margin-right: 4px;
    padding: 8px 16px;
    border-radius: 6px;
    color: var(--mac-secondary);
    transition: all 0.2s;
  }
  
  .nav-tabs .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.03);
  }
  
  .nav-tabs .nav-link.active {
    background-color: rgba(0, 113, 227, 0.1);
    color: var(--mac-primary);
    font-weight: 500;
  }
  
  /* Tabulator styling for mac-like tables */
  .tabulator {
    border: 1px solid var(--mac-border);
    border-radius: 6px;
    overflow: hidden;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", "San Francisco", Helvetica, Arial, sans-serif;
  }
  
  .tabulator .tabulator-header {
    background-color: transparent;
    border-bottom: 1px solid var(--mac-border);
  }
  
  .tabulator-row.tabulator-row-even {
    background-color: #fcfcfc;
  }
  
  .tabulator-row:hover {
    background-color: rgba(0, 113, 227, 0.05) !important;
  }
  
  /* Badges like macOS tags */
  .badge {
    border-radius: 4px;
    padding: 0.25em 0.6em;
    font-weight: 500;
  }
  
  /* List groups like macOS sidebar items */
  .list-group-item {
    border-color: var(--mac-border);
    padding: 0.75rem 1rem;
    transition: background-color 0.2s;
  }
  
  .list-group-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
  }
  
  /* Remove file button */
  .remove-file-btn {
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.9rem;
  }
  
  /* Animation for transitions */
  .tab-pane {
    animation: fadein 0.2s;
  }
  
  @keyframes fadein {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  /* Container spacing */
  .container-xl {
    padding: 0 20px;
  }
  
  /* Sticky sidebar for tools panel */
  @media (min-width: 992px) {
    .col-lg-3 .card {
      position: sticky;
      top: 20px;
    }
  }