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

/* GLOBAL RESETS & VARS */
:root {
  --erp-bg: #f8fafc;
  /* lighter soft gray */
  --erp-sidebar: #0f172a;
  /* slate 900 */
  --erp-sidebar-active: #1e293b;
  /* slate 800 */
  --erp-primary: #4f46e5;
  /* indigo 600 */
  --erp-primary-hover: #4338ca;
  /* indigo 700 */
  --erp-text: #334155;
  /* slate 700 */
  --erp-text-muted: #94a3b8;
  /* slate 400 */
  --erp-border: #e2e8f0;
  /* slate 200 */
  --erp-card: #ffffff;
  --radius: 8px;
  /* Slightly rounder edges */
}

body {
  font-family: 'Inter', sans-serif !important;
  background: var(--erp-bg) !important;
  color: var(--erp-text) !important;
  margin: 0;
  padding: 0;
}

/* LAYOUT */
.app-layout {
  display: flex !important;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
  background: var(--erp-bg) !important;
}

.sidebar {
  width: 250px;
  background: var(--erp-sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 1000;
}

.sidebar-logo {
  height: 65px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-logo i {
  color: var(--erp-primary);
  margin-right: 10px;
  font-size: 22px;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 15px 0;
}

.sidebar-menu a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #a2a3b7;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
  background: var(--erp-sidebar-active);
  color: #fff;
  border-left: 3px solid var(--erp-primary);
}

.sidebar-menu a i {
  width: 30px;
  font-size: 16px;
}

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--erp-bg);
}

.topbar {
  height: 65px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 25px;
  border-bottom: 1px solid var(--erp-border);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
  justify-content: space-between;
}

.page-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--erp-text);
  margin: 0;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 25px;
}

/* OVERRIDE OLD COMPONENTS */
header:not(.topbar) {
  display: none !important;
}

.mobile-menu-toggle {
  display: none !important;
}

.mobile-nav-container {
  display: none !important;
}

.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  animation: none !important;
}

/* Cards & Forms (Tally/ERP Style) */
.form-card,
.search-filter-card,
.invoices-section,
.graph-section,
.backup-section,
.statement-container,
.stock-cards,
.summary-cards {
  background: #fff !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--erp-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  padding: 25px !important;
  margin-bottom: 20px !important;
}

.form-card::before,
.search-filter-card::before,
.invoice-card::before,
.summary-card::before,
.preview::before {
  display: none !important;
}

/* Dashboard Quick Links */
.grid-menu {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
}

.menu-btn {
  background: #fff !important;
  border: 1px solid var(--erp-border) !important;
  color: var(--erp-text) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px 20px !important;
  border-radius: var(--radius) !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.menu-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.12) !important;
  border-color: var(--erp-primary) !important;
}

.menu-btn i {
  font-size: 30px !important;
  color: var(--erp-primary) !important;
  margin-bottom: 12px !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--erp-primary) !important;
}

.menu-btn span {
  font-weight: 600 !important;
  font-size: 15px !important;
}

.menu-btn::before {
  display: none !important;
}

/* Inputs and Forms */
input,
select,
textarea {
  border: 1px solid var(--erp-border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  background: #fcfcfc !important;
  color: var(--erp-text) !important;
  transition: all 0.2s !important;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--erp-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(54, 153, 255, 0.1) !important;
}

label {
  font-weight: 600 !important;
  color: var(--erp-text) !important;
  margin-bottom: 6px !important;
  display: block;
  font-size: 13px !important;
}

/* Buttons */
button:not(.mobile-menu-toggle),
.btn,
.action-btn,
.save-btn,
.new-order-btn,
.backup-btn {
  background: var(--erp-primary) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button:hover:not(.mobile-menu-toggle),
.btn:hover {
  background: var(--erp-primary-hover) !important;
}

.back-btn {
  background: #e4e6ef !important;
  color: #3f4254 !important;
  margin-bottom: 20px !important;
}

.back-btn:hover {
  background: #d3d6e4 !important;
}

button.sheet-btn,
.action-btn.delete,
.delete-order-btn,
.remove-btn {
  background: #f64e60 !important;
}

button.sheet-btn:hover,
.action-btn.delete:hover,
.delete-order-btn:hover,
.remove-btn:hover {
  background: #e33e4f !important;
}

/* Tables ERP style */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  border: 1px solid var(--erp-border) !important;
  background: #fff !important;
}

th {
  background: #f3f6f9 !important;
  color: #464e5f !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 12px 15px !important;
  border: 1px solid var(--erp-border) !important;
  text-align: left;
}

td {
  padding: 12px 15px !important;
  border: 1px solid var(--erp-border) !important;
  color: #3f4254 !important;
}

tr:hover td {
  background: #f8f9fa !important;
}

/* Specific fixes */
.preview {
  background: #fff !important;
  border: 1px solid var(--erp-border) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03) !important;
}

.invoice-card {
  border: 1px solid var(--erp-border) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}

.print-area {
  background: #fff !important;
  padding: 30px !important;
  border: 1px solid var(--erp-border) !important;
  border-radius: var(--radius) !important;
}

.two-box {
  border: 1px solid var(--erp-border) !important;
}

.two-box div {
  border-right: 1px solid var(--erp-border) !important;
}

@media print {

  .sidebar,
  .topbar {
    display: none !important;
  }

  .app-layout {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .content-area {
    overflow: visible !important;
    padding: 0 !important;
  }

  .container {
    max-width: 100% !important;
  }

  body {
    background: #fff !important;
  }

  button {
    display: none !important;
  }

  .print-area {
    border: none !important;
    padding: 0 !important;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -260px;
    height: 100vh;
    transition: left 0.3s ease;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
  }

  .sidebar.active {
    left: 0;
  }

  .mobile-menu-toggle {
    display: block !important;
    background: transparent !important;
    color: var(--erp-text);
    font-size: 22px;
    padding: 0 15px 0 0 !important;
    cursor: pointer;
  }

  .desktop-date {
    display: none !important;
  }

  .topbar {
    padding: 0 15px;
    justify-content: flex-start;
  }

  .page-heading {
    flex: 1;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Dashboard Cards Stacking */
  .grid-menu {
    grid-template-columns: 1fr !important;
  }

  .stats-cards,
  .summary-cards {
    grid-template-columns: 1fr !important;
  }

  /* Form & Meta Stacking */
  .address-grid,
  .meta-grid,
  .totals-row,
  .details-row {
    grid-template-columns: 1fr !important;
  }

  .totals-row,
  .details-row {
    display: flex !important;
    flex-direction: column !important;
  }

  .totals-value,
  .details-value {
    border-left: none !important;
    border-top: 1px solid #e1e1e1;
  }

  .container {
    padding: 10px !important;
  }

  .content-area {
    padding: 15px !important;
  }

  /* Tally Template View wrapper */
  .doc-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--erp-border);
    border-radius: var(--radius);
    padding: 10px;
    background: #fff;
  }

  .doc-paper {
    min-width: 800px;
    /* Force minimum width to preserve layout inside scrollable area */
  }
}

/* Common Mobile Responsive Wrappers */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  border: 1px solid var(--erp-border);
  border-radius: var(--radius);
}

.table-responsive table {
  margin-bottom: 0 !important;
  border: none !important;
  min-width: 700px;
}