@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ===========================
   Light Theme
   =========================== */
:root[data-theme="light"] {
  --color-bg: #F7F8FA;
  --color-card: #FFFFFF;
  --color-nav: #EEF0F6;
  --color-table-h: #E3E7F0;
  --color-border: #E3E6EB;
  --color-text: #23223A;
  --color-muted: #8686A1;
  --color-primary: #6741D9;
  --color-primary-hover: #5F3DC4;
  --color-accent: #3BC9DB;
  --color-success: #40C057;
  --color-danger: #FA5252;

  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-nav);
  --bs-success: var(--color-success);
  --bs-danger: var(--color-danger);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-primary);
  --bs-card-bg: var(--color-card);
  --bs-navbar-bg: var(--color-nav);
  --bs-navbar-color: var(--color-text);
  --bs-table-bg: var(--color-card);
  --bs-table-color: var(--color-text);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-color: var(--color-card);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-color: var(--color-card);
}

/* ===========================
   Dark Theme
   =========================== */
:root[data-theme="dark"] {
  --color-bg: #181825;
  --color-card: #212135;
  --color-nav: #282848;
  --color-table-h: #232340;
  --color-border: #22223A;
  --color-text: #E7E7FF;
  --color-muted: #A3A2C2;
  --color-primary: #B197FC;
  --color-primary-hover: #181825;
  --color-accent: #3BC9DB;
  --color-success: #63E6BE;
  --color-danger: #FA5252;

  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-nav);
  --bs-success: var(--color-success);
  --bs-danger: var(--color-danger);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-primary);
  --bs-card-bg: var(--color-card);
  --bs-navbar-bg: var(--color-nav);
  --bs-navbar-color: var(--color-text);
  --bs-table-bg: var(--color-card);
  --bs-table-color: var(--color-text);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-color: var(--color-card);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-color: var(--color-card);
}

/* ===========================
   Base & Layout
   =========================== */
body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: 'Inter', sans-serif !important;
  min-height: 100vh;
  letter-spacing: 0.01em;
  transition: background 0.25s, color 0.25s;
}

.navbar,
.footer {
  background: var(--color-nav) !important;
  color: var(--color-text) !important;
  border: none !important;
  box-shadow: 0 3px 16px 0 rgba(60, 56, 77, 0.04) !important;
}

.footer {
  font-size: 1rem;
  border-top: 1.5px solid var(--color-border);
  margin-top: 3rem;
}

.navbar-brand {
  color: var(--color-primary) !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 2rem;
}

.navbar-nav .nav-link {
  color: var(--color-muted) !important;
  font-weight: 500;
  margin-right: 1.2rem;
  transition: color 0.18s;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
  color: var(--color-primary) !important;
}

/* Card & Table */
.card {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  border-radius: 1.2rem;
  border: 1.5px solid var(--color-border);
  box-shadow: 0 4px 28px 0 rgba(40, 32, 77, 0.08);
  transition: background 0.2s, color 0.2s;
}

.table,
.table th,
.table td {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.table thead th {
  background: var(--color-table-h) !important;
  color: var(--color-text) !important;
  border-bottom: 2px solid var(--color-primary) !important;
}

/* Table shadow for "lifted" look */
.table {
  box-shadow: 0 4px 18px 0 rgba(90, 56, 170, 0.03);
  border-radius: 0.9rem;
  overflow: hidden;
}

/* ===========================
   Buttons
   =========================== */
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
  background: var(--color-primary) !important;
  color: var(--color-card) !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 1px 8px 0 rgba(60, 50, 100, 0.08);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-hover) !important;
  color: var(--color-card) !important;
}

/* Accent Button (for special actions) */
.btn-accent,
.btn-accent:focus,
.btn-accent:active {
  background: var(--color-accent) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 1px 8px 0 rgba(60, 190, 230, 0.06);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.btn-danger,
.btn-danger:focus,
.btn-danger:active {
  background: var(--color-danger) !important;
  color: var(--color-card) !important;
  border: none !important;
  font-weight: 600;
}

.btn-danger:hover {
  background: #e03131 !important;
}

/* Remove Bootstrap .btn-success, .btn-warning (not used in your theme) */
.btn-success,
.btn-success:focus,
.btn-success:active,
.btn-warning,
.btn-warning:focus,
.btn-warning:active {
  background: var(--color-accent) !important;
  color: #fff !important;
  border: none !important;
}

.btn-success:hover,
.btn-warning:hover {
  background: var(--color-primary-hover) !important;
  color: #fff !important;
}

/* DataTables Pagination Styling */
.dataTables_paginate .paginate_button {
  background: var(--color-card) !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: 0.8em !important;
  padding: 0.35em 1em !important;
  margin: 0 0.10em;
  font-weight: 500;
  transition: background 0.14s, color 0.14s, border 0.14s;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:active {
  background: var(--color-accent) !important;
  color: #fff !important;
  border: 1.5px solid var(--color-accent) !important;
  box-shadow: 0 2px 12px 0 rgba(70, 193, 219, 0.07);
}

.dataTables_paginate .paginate_button:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: 1.5px solid var(--color-primary) !important;
}

/* ===========================
   Links
   =========================== */
a,
.link-accent {
  color: var(--color-accent) !important;
  text-decoration: none;
  transition: color 0.15s;
}

a:hover,
.link-accent:hover {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

/* ===========================
   Misc
   =========================== */
::-webkit-scrollbar-thumb {
  background: var(--color-nav);
  border-radius: 2px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

/* Button animation */
.btn {
  transition: background 0.16s, color 0.16s, box-shadow 0.2s;
}

.btn:active {
  box-shadow: 0 1px 3px 0 rgba(90, 56, 170, 0.14);
}

/* Card hover effect */
.card:hover {
  box-shadow: 0 8px 30px 0 rgba(90, 56, 170, 0.11);
  transform: translateY(-3px) scale(1.01);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card {
    padding: 1.5rem !important;
  }

  .navbar-brand {
    font-size: 1.3rem;
  }
}

.logout-link {
  text-decoration: none !important;
}

.logout-link:hover,
.logout-link:focus {
  text-decoration: underline !important;
}

/* FullCalendar Custom Theme */
.fc {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
}

.fc-toolbar-title {
  color: var(--color-text);
  font-weight: 700;
}

.fc-button,
.fc-button-primary {
  background: var(--color-primary) !important;
  color: var(--color-card) !important;
  border: none !important;
  box-shadow: none;
}

.fc-button:hover,
.fc-button-primary:hover,
.fc-button:focus,
.fc-button-primary:focus {
  background: var(--color-muted) !important;
  color: var(--color-card) !important;
}

.fc-daygrid-day,
.fc-timegrid-slot,
.fc-timegrid-axis,
.fc-scrollgrid,
.fc-col-header-cell,
.fc-timegrid-slot-label {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.fc-col-header-cell-cushion {
  color: var(--color-primary) !important;
  font-weight: 600;
}

.fc-day-today,
.fc-timegrid-col.fc-day-today {
  background: var(--color-nav) !important;
}

.fc-timegrid-slot {
  border-color: var(--color-border) !important;
}

.fc-timegrid-slot-label {
  color: var(--color-muted) !important;
}

.fc-event {
  background: var(--color-accent) !important;
  color: var(--color-card) !important;
  border: none !important;
}


/* Sidebar specific tweaks */
.sidebar {
  background: var(--color-nav);
  color: var(--color-text);
  /* min-height: 100vh; */
  /* REMOVED THIS LINE */
  box-shadow: 2px 0 18px 0 rgba(90, 56, 170, 0.04);
}

.sidebar .nav-link {
  color: var(--color-muted) !important;
  border-radius: 0.7rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  transition: color 0.17s, background 0.17s;
}

.sidebar .nav-link.active,
.sidebar .nav-link:focus,
.sidebar .nav-link:hover {
  color: var(--color-primary) !important;
  background: var(--color-card) !important;
}

.sidebar .nav-link.disabled {
  color: var(--color-border) !important;
  pointer-events: none;
  opacity: 0.65;
}

.sidebar .navbar-brand {
  color: var(--color-primary) !important;
}

.sidebar .form-check-label {
  font-size: 1em;
}

/* Old duplicate removed (if you see two .sidebar sections, just use the one above) */

/* .with-sidebar {
  margin-left: 250px;
  min-height: 100vh;  REMOVED THIS LINE
} */
.with-sidebar {
  margin-left: 250px;
}

/* Responsive Sidebar Tweaks */
@media (max-width: 768px) {
  .sidebar {
    width: 100vw;
    position: static;
  }

  .with-sidebar {
    margin-left: 0;
  }
}

@media print {
  body * {
    visibility: hidden;
  }

  #invoicePrint,
  #invoicePrint * {
    visibility: visible;
  }

  #invoicePrint {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  aside,
  nav,
  .sidebar,
  .btn,
  .no-print {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }
}