/* 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);
  max-height: 100vh;
  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;
  }
}