/* ============================================================
   MALAYSIA PROPERTY AGENT ADMIN SYSTEM - CUSTOM THEME
   Color Palette:
     White:    #ffffff
     Cream:    #fbf7f0
     Light Green: #edf3e3
     Sage:     #cfe0b8
     Olive:    #8aa66b
     Dark:     #3f4a33
     Accent:   #6b8f47  (mid-green for hover/active)
   ============================================================ */

/* --- CSS Variables --- */
:root {
  --clr-white:       #ffffff;
  --clr-cream:       #fbf7f0;
  --clr-light-green: #edf3e3;
  --clr-sage:        #cfe0b8;
  --clr-olive:       #8aa66b;
  --clr-dark:        #3f4a33;
  --clr-accent:      #6b8f47;
  --clr-accent-hover:#5a7a3a;
  --clr-text:        #3f4a33;
  --clr-muted:       #6e7d5a;
  --radius-btn:      8px;
  --radius-card:     10px;
  --shadow-card:     0 2px 12px rgba(63,74,51,0.10);
  --shadow-hover:    0 4px 20px rgba(63,74,51,0.18);
}

/* ============================================================
   GLOBAL OVERRIDES
   ============================================================ */
body {
  background-color: var(--clr-light-green) !important;
  color: var(--clr-text) !important;
  font-family: 'Segoe UI', 'Open Sans', sans-serif !important;
}

a { color: var(--clr-accent); }
a:hover { color: var(--clr-accent-hover); }

/* ============================================================
   BUTTONS  – rounded corners, brand palette
   ============================================================ */
.btn {
  border-radius: var(--radius-btn) !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: background-color 0.2s, box-shadow 0.2s;
}

/* Primary (olive/accent) */
.btn-primary,
.btn.blue,
.btn.green-haze {
  background-color: var(--clr-accent) !important;
  border-color:     var(--clr-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn.blue:hover, .btn.blue:focus,
.btn.green-haze:hover {
  background-color: var(--clr-accent-hover) !important;
  border-color:     var(--clr-accent-hover) !important;
  box-shadow: 0 2px 8px rgba(107,143,71,0.35) !important;
}

/* Dark / secondary */
.btn-default,
.btn.default {
  background-color: var(--clr-sage) !important;
  border-color:     var(--clr-sage) !important;
  color: var(--clr-dark) !important;
}
.btn-default:hover, .btn.default:hover {
  background-color: var(--clr-olive) !important;
  border-color:     var(--clr-olive) !important;
  color: #fff !important;
}

/* Success */
.btn-success, .btn.green {
  background-color: #4a7c3f !important;
  border-color:     #4a7c3f !important;
  color: #fff !important;
}
.btn-success:hover, .btn.green:hover {
  background-color: #3a6430 !important;
  box-shadow: 0 2px 8px rgba(74,124,63,0.35) !important;
}

/* Danger */
.btn-danger, .btn.red {
  border-radius: var(--radius-btn) !important;
}

/* ============================================================
   PAGE HEADER / NAVBAR
   ============================================================ */
.page-header.navbar {
  background-color: var(--clr-dark) !important;
  box-shadow: 0 2px 10px rgba(63,74,51,0.30) !important;
}

/* top bar icons / text */
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i {
  color: var(--clr-sage) !important;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover {
  background-color: var(--clr-accent) !important;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle {
  background-color: var(--clr-accent) !important;
}

/* Welcome text */
#lblWelcome, #lblName, #lblDateTime {
  color: var(--clr-sage) !important;
}

/* Logout button */
.page-header.navbar .btn.red,
.page-header.navbar a.btn.red {
  background-color: #c0392b !important;
  border-radius: var(--radius-btn) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
.page-sidebar {
  background-color: var(--clr-dark) !important;
}

/* 1st-level menu links */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a,
.page-sidebar .page-sidebar-menu > li > a {
  border-top: 1px solid rgba(207,224,184,0.12) !important;
  color: var(--clr-sage) !important;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i,
.page-sidebar .page-sidebar-menu > li > a > i {
  color: var(--clr-olive) !important;
}

/* Active link */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a,
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a {
  background-color: var(--clr-accent) !important;
  border-top-color: transparent !important;
  color: #fff !important;
}

/* Hover */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a,
.page-sidebar .page-sidebar-menu > li:hover > a {
  background-color: rgba(107,143,71,0.30) !important;
  color: #fff !important;
}

/* Open sub-menu */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a,
.page-sidebar .page-sidebar-menu > li.open > a {
  background-color: rgba(107,143,71,0.20) !important;
  color: var(--clr-sage) !important;
}

/* Sub-menu items */
.page-sidebar .page-sidebar-menu .sub-menu > li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a {
  background-color: rgba(63,74,51,0.50) !important;
  color: var(--clr-sage) !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a {
  background-color: var(--clr-accent) !important;
  color: #fff !important;
}

/* ============================================================
   PORTLET / CARDS
   ============================================================ */
.portlet {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  background-color: var(--clr-white) !important;
  border: 1px solid var(--clr-sage) !important;
  margin-bottom: 22px;
}

.portlet .portlet-title {
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  background-color: var(--clr-light-green) !important;
  border-bottom: 1px solid var(--clr-sage) !important;
  padding: 0 16px !important;
  min-height: 44px !important;
}

.portlet .portlet-title .caption {
  color: var(--clr-dark) !important;
  font-weight: 600;
}

.portlet .portlet-title .caption > i {
  color: var(--clr-accent) !important;
}

.portlet.light.bordered {
  border: 1px solid var(--clr-sage) !important;
}

/* ============================================================
   DASHBOARD STAT CARDS
   ============================================================ */
.dashboard-stat {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.dashboard-stat:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}

/* Override color classes with brand palette */
.dashboard-stat.red-sunglo {
  background-color: #c0392b !important;
}
.dashboard-stat.yellow-saffron {
  background-color: var(--clr-olive) !important;
}
.dashboard-stat.blue-madison {
  background-color: #2e7aad !important;
}
.dashboard-stat.green-haze {
  background-color: var(--clr-accent) !important;
}

.dashboard-stat .more {
  background-color: rgba(0,0,0,0.15) !important;
  border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  color: #fff !important;
  transition: background-color 0.2s;
}
.dashboard-stat .more:hover {
  background-color: rgba(0,0,0,0.28) !important;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control {
  border: 1px solid var(--clr-sage) !important;
  border-radius: 6px !important;
  background-color: var(--clr-white) !important;
  color: var(--clr-text) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
  border-color: var(--clr-accent) !important;
  box-shadow: 0 0 0 3px rgba(107,143,71,0.18) !important;
}

/* ============================================================
   TABLES  – Design 1 (simple transaction rows)
   ============================================================ */
.table-design1 thead > tr > th {
  background-color: var(--clr-dark) !important;
  color: var(--clr-sage) !important;
  font-weight: 600;
  border: none !important;
  padding: 10px 12px;
}
.table-design1 tbody > tr:nth-child(odd) {
  background-color: var(--clr-white);
}
.table-design1 tbody > tr:nth-child(even) {
  background-color: var(--clr-light-green);
}
.table-design1 tbody > tr:hover {
  background-color: var(--clr-sage) !important;
  transition: background-color 0.15s;
}
.table-design1 tbody > tr > td {
  border-bottom: 1px solid var(--clr-sage) !important;
  vertical-align: middle;
  padding: 8px 12px;
}

/* ============================================================
   TABLES  – Design 2 (info-card rows)
   ============================================================ */
.table-design2 {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}
.table-design2 thead > tr > th {
  background-color: var(--clr-dark) !important;
  color: var(--clr-sage) !important;
  font-weight: 600;
  border: none !important;
  padding: 10px 14px;
}
.table-design2 thead > tr > th:first-child { border-radius: 8px 0 0 8px; }
.table-design2 thead > tr > th:last-child  { border-radius: 0 8px 8px 0; }

.table-design2 tbody > tr {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s, transform 0.2s;
}
.table-design2 tbody > tr:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.table-design2 tbody > tr > td {
  border: none !important;
  padding: 12px 14px;
  vertical-align: middle;
  background-color: transparent;
}
.table-design2 tbody > tr > td:first-child {
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  border-left: 4px solid var(--clr-accent) !important;
}
.table-design2 tbody > tr > td:last-child {
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.table-design2 .card-info-label {
  font-size: 11px;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.table-design2 .card-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-dark);
}
.table-design2 .btn-card-detail {
  position: absolute;
  top: 10px;
  right: 14px;
  background-color: var(--clr-accent) !important;
  color: #fff !important;
  border-radius: var(--radius-btn) !important;
  font-size: 12px;
  padding: 4px 10px;
}
.table-design2 tbody > tr > td.cell-relative {
  position: relative;
}

/* ============================================================
   PAGE BREADCRUMB / BAR
   ============================================================ */
.page-bar {
  background-color: var(--clr-cream) !important;
  border-radius: 6px !important;
  border: 1px solid var(--clr-sage) !important;
}

/* ============================================================
   PAGE FOOTER
   ============================================================ */
.page-footer {
  background-color: var(--clr-dark) !important;
}
.page-footer .page-footer-inner {
  color: var(--clr-sage) !important;
}

/* ============================================================
   LABELS / BADGES (status)
   ============================================================ */
.label-success { background-color: var(--clr-accent) !important; }
.label-warning { background-color: #e67e22 !important; }
.label-danger  { background-color: #c0392b !important; }

/* ============================================================
   PAGE TITLE
   ============================================================ */
.page-title {
  color: var(--clr-dark) !important;
  font-weight: 600;
  border-left: 4px solid var(--clr-accent);
  padding-left: 12px;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login .content,
.user-login-5 .login-container {
    background-color: #cadeb4 !important;
}
.user-login-5 .login-content h1 {
  color: var(--clr-dark) !important;
}
.login .btn-success {
  background-color: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
  border-radius: var(--radius-btn) !important;
}
.login .btn-success:hover {
  background-color: var(--clr-accent-hover) !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--clr-light-green); }
::-webkit-scrollbar-thumb { background: var(--clr-olive); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-accent); }