/* theme-beauty.css

   Modern, professional UI tailored for a CA SaaS (trading / contract notes / Tally export)

   Add this AFTER your existing CSS files so it overrides earlier rules where needed.

*/

/* Root variables */
:root{
  --bg-1: #f6f8fb;            /* page background */
  --panel-bg: rgba(255,255,255,0.85);
  --glass-bg: rgba(255,255,255,0.6);
  --accent: #0b6b7a;          /* teal-ish */
  --accent-2: #0f3a63;        /* deep navy */
  --muted: #6b7280;
  --text-1: #0f1724;
  --card-shadow: 0 10px 30px rgba(11, 43, 63, 0.08);
  --card-shadow-2: 0 6px 18px rgba(11, 43, 63, 0.06);
  --radius: 10px;
  --radius-sm: 6px;
  --glass-blur: 8px;
  --easing: cubic-bezier(.2,.9,.3,1);
  --space: 8px;
  --max-width: 1280px;
  --accent-glow: 0 6px 26px rgba(11,107,122,0.12);
}

/* Page background and base typography */
html,body{
  min-height:100%;
  background: linear-gradient(180deg, #f8fbfd 0%, var(--bg-1) 100%);
  color:var(--text-1);
  font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:14px;
  line-height:1.45;
}

/* Ensure page content takes full height and pushes footer down */
.page-content {
  padding-bottom: 20px;
}

/* When page-content is inside main-content, make it grow to fill space */
.main-content .page-content {
  flex: 1;
  min-height: auto;
}

/* Container alignment for main area - don't constrain dashboard/wide pages */
.container {
  max-width: var(--max-width);
}
/* Allow container-fluid to be full width on dashboard and similar pages */
.container-fluid {
  /* Remove max-width constraint for full-width pages like dashboard */
}

/* Headings */
h1,h2,h3,h4{
  color:var(--text-1);
  margin-bottom: 12px;
  letter-spacing: -0.2px;
  font-weight:600;
}
h1{ font-size:1.6rem; }
h2{ font-size:1.25rem; }
h3{ font-size:1.05rem; }

/* Card style — modern elevated panels */
.card {
  background: var(--panel-bg);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: filter .28s var(--easing), opacity .28s var(--easing);
  overflow: hidden;
  position: relative;
}

/* Subtle hover effect for cards - using filter to prevent layout shifts */
.card:hover {
  filter: brightness(1.02);
  opacity: 0.98;
}

/* Card header subtle divider */
.card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(15,23,36,0.06);
  padding: 16px 20px;
  font-weight:600;
  color:var(--accent-2);
}

/* Card body spacing */
.card .card-body {
  padding: 18px 20px;
}

/* Accent top stripe for card types (keeps existing card-*-outline classes working) */
.card-outline {
  position:relative;
}
.card-outline::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}

/* Buttons — primary + subtle variants */
.btn,
input[type="button"].btn,
button.btn {
  border-radius: 8px;
  padding: 8px 14px;
  font-weight:600;
  transition: opacity .18s var(--easing), background-color .18s var(--easing), filter .18s var(--easing);
  box-shadow: none;
  border: 1px solid rgba(15,23,36,0.06);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.9) 100%);
  color: var(--text-1) !important; /* Default text color for buttons */
  position: relative;
}
.btn:active,
input[type="button"].btn:active,
button.btn:active { 
  opacity: 0.9;
}

/* Primary - override bg-gradient if present */
.btn-primary,
input[type="button"].btn-primary,
button.btn-primary,
.btn-primary.bg-gradient,
input[type="button"].btn-primary.bg-gradient,
button.btn-primary.bg-gradient {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(11,107,122,0.12);
  filter: brightness(1);
}
.btn-primary:hover,
input[type="button"].btn-primary:hover,
button.btn-primary:hover,
.btn-primary.bg-gradient:hover,
input[type="button"].btn-primary.bg-gradient:hover,
button.btn-primary.bg-gradient:hover {
  filter: brightness(1.1);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color: #fff !important;
}

/* Secondary subtle */
.btn-secondary,
input[type="button"].btn-secondary,
button.btn-secondary {
  background: transparent !important;
  color: var(--accent-2) !important;
  border: 1px solid rgba(15,23,36,0.06);
}
.btn-secondary:hover,
input[type="button"].btn-secondary:hover,
button.btn-secondary:hover {
  color: var(--accent-2) !important;
}

/* Success button - override bg-gradient if present */
.btn-success,
input[type="button"].btn-success,
button.btn-success,
.btn-success.bg-gradient,
input[type="button"].btn-success.bg-gradient,
button.btn-success.bg-gradient {
  background: linear-gradient(180deg, #28a745 0%, #20c997 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(40,167,69,0.12);
  filter: brightness(1);
}
.btn-success:hover,
input[type="button"].btn-success:hover,
button.btn-success:hover,
.btn-success.bg-gradient:hover,
input[type="button"].btn-success.bg-gradient:hover,
button.btn-success.bg-gradient:hover {
  filter: brightness(1.1);
  background: linear-gradient(180deg, #28a745 0%, #20c997 100%) !important;
  color: #fff !important;
}

/* Light button */
.btn-light,
input[type="button"].btn-light,
button.btn-light {
  background: rgba(255,255,255,0.9) !important;
  color: var(--text-1) !important;
  border: 1px solid rgba(15,23,36,0.06);
}
.btn-light:hover,
input[type="button"].btn-light:hover,
button.btn-light:hover {
  background: rgba(255,255,255,1) !important;
  color: var(--text-1) !important;
}

/* Danger button - for cancel buttons */
.btn-danger,
input[type="button"].btn-danger,
button.btn-danger,
.btn-danger.bg-gradient,
input[type="button"].btn-danger.bg-gradient,
button.btn-danger.bg-gradient {
  background: linear-gradient(180deg, #dc3545 0%, #c82333 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(220,53,69,0.12);
  filter: brightness(1);
}
.btn-danger:hover,
input[type="button"].btn-danger:hover,
button.btn-danger:hover,
.btn-danger.bg-gradient:hover,
input[type="button"].btn-danger.bg-gradient:hover,
button.btn-danger.bg-gradient:hover {
  filter: brightness(1.1);
  background: linear-gradient(180deg, #dc3545 0%, #c82333 100%) !important;
  color: #fff !important;
}

/* Small utility button */
.btn-sm {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Inputs / selects — cleaner focus */
.form-control, input[type="text"], input[type="password"], textarea, select {
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,36,0.08);
  background: rgba(255,255,255,0.9);
  box-shadow: none;
  transition: box-shadow .18s var(--easing), border-color .18s var(--easing);
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(11,107,122,0.06);
}

/* Table styling — compact but readable */
.table {
  width: 100%;
  background: transparent;
  border-collapse: collapse;
}
.table thead th {
  padding: 12px 14px;
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid rgba(15,23,36,0.06);
  font-weight:600;
}
.table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,36,0.04);
  vertical-align: middle;
  font-size: 13px;
}
.table tr:hover td {
  background: linear-gradient(90deg, rgba(11,107,122,0.02), rgba(255,255,255,0));
}

/* Badge, chip */
.badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-weight:600;
  font-size:12px;
}
.badge-accent {
  background: linear-gradient(90deg, rgba(11,107,122,0.12), rgba(15,58,99,0.08));
  color: var(--accent-2);
  border: 1px solid rgba(11,107,122,0.06);
}

/* Sidebar / nav (if present) */
.app-sidebar {
  background: linear-gradient(180deg, rgba(15,58,99,0.02), rgba(11,107,122,0.02));
  border-right: 1px solid rgba(11,43,63,0.04);
  padding: 18px;
  min-height: 100vh;
}
.app-sidebar .nav-link {
  color: var(--muted);
  padding: 12px 14px;
  border-radius: 8px;
  display:flex;
  align-items:center;
}
.app-sidebar .nav-link.active, .app-sidebar .nav-link:hover {
  background: linear-gradient(90deg, rgba(11,107,122,0.06), rgba(15,58,99,0.03));
  color: var(--accent-2);
}

/* Header (topbar) */
.app-header {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(11,43,63,0.04);
  padding: 12px 18px;
  display:flex;
  align-items:center;
  gap:12px;
}

/* Avatar small */
.header-profile-user {
  width:38px;
  height:38px;
  object-fit:cover;
  border-radius:50%;
  box-shadow: 0 4px 12px rgba(11,43,63,0.08);
  border: 2px solid rgba(255,255,255,0.6);
}

/* Search box */
.top-search {
  max-width:420px;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
}
.top-search .form-control { flex:1 }

/* Footer */
.footer, .app-footer {
  padding: 18px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
  border-top: 1px solid rgba(11,43,63,0.03);
  background: transparent;
  margin-top: auto;
  position: relative;
  clear: both;
}

/* Ensure main-content area properly contains footer */
.main-content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 150px);
  position: relative;
}

/* Ensure page-content within main-content flows properly */
.main-content .page-content {
  flex: 1;
  min-height: auto;
  padding-bottom: 0;
}

/* Footer should be at the bottom of main-content */
.main-content .footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* For pages that don't use main-content wrapper (standalone pages) */
body > .page-content {
  min-height: calc(100vh - 100px);
  padding-bottom: 80px;
}

/* Fix layout-wrapper to ensure proper structure */
#layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#layout-wrapper .main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Utility: small muted text */
.text-muted-sm { color: var(--muted); font-size:13px; }

/* Tiny animation helpers */
.fade-up {
  transform: translateY(6px);
  opacity:0;
  transition: transform .5s var(--easing), opacity .5s var(--easing);
}
.fade-up.visible { transform:none; opacity:1; }

/* Forms: grouped label alignment for dense forms */
.form-row { display:flex; gap:12px; align-items:flex-start; }
.form-row .form-group { flex:1 }

/* Responsive tweaks */
@media (max-width: 991px) {
  .card .card-header, .card .card-body { padding: 14px; }
  .header-profile-user { width:32px; height:32px; }
}

/* Specific quick overrides for bootstrap classes (non-invasive) */
.btn-outline-primary {
  color: var(--accent-2);
  border-color: rgba(11,107,122,0.12);
}
.table-responsive { border-radius: 10px; overflow:hidden; box-shadow: var(--card-shadow-2); }

/* Tally/Accounting specific: highlight important buttons */
.btn-export {
  background: linear-gradient(90deg, #f6c85f, #f18f01);
  color: #fff;
  border: none;
  box-shadow: 0 10px 28px rgba(241,143,1,0.12);
}

/* Form error hint */
.field-validation-error { color:#e74c3c; font-size:12px; margin-top:6px; display:block; }

/* Breadcrumb fixes - ensure URLs don't appear as text */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  display: inline-block;
  padding: 0 0.5rem;
  color: var(--muted);
  font-weight: normal;
}

.breadcrumb-item a {
  color: var(--accent-2);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--text-1);
  font-weight: 500;
}

/* Ensure href attributes are not displayed as text */
.breadcrumb-item a::before,
.breadcrumb-item a::after {
  content: none !important;
}

/* Hide any pseudo-elements that might show URLs */
.breadcrumb-item::after {
  content: none !important;
}

/* End theme-beauty.css */