/* ============================================================
   Ramanous Admin — Modern UI refresh (Cream + Forest + Clay)
   Pure visual override. Loaded LAST so it wins over the theme.
   Matches the Ramanous storefront: Fraunces display + Inter body,
   forest-green sidebar, cream canvas, clay accents.
   ============================================================ */

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

:root {
  /* Ramanous storefront palette — cream + forest + clay + sage */
  --ag-green:        #2f4a38;   /* forest primary */
  --ag-green-600:    #24382b;
  --ag-green-700:    #1c2c22;
  --ag-green-bright: #3c5a45;   /* lighter forest (gradients) */
  --ag-green-soft:   #e7ecdb;   /* pale sage tint */
  --ag-clay:         #b85c38;   /* terracotta accent */
  --ag-clay-dark:    #9f4c2c;
  --ag-clay-soft:    #efd9cd;
  --ag-sage:         #8a9a5b;
  --ag-sidebar-1:    #2f4a38;   /* forest sidebar */
  --ag-sidebar-2:    #24382b;
  --ag-canvas:       #f7f4ec;   /* cream canvas */
  --ag-card:         #ffffff;
  --ag-ink:          #1e2a22;
  --ag-text:         #3c463c;
  --ag-muted:        #7c8377;
  --ag-border:       #e6e2d6;   /* warm hairline */
  --ag-border-2:     #efece2;
  --ag-radius:       14px;
  --ag-radius-sm:    10px;
  --ag-shadow-sm:    0 1px 2px rgba(30,44,38,.05), 0 1px 3px rgba(30,44,38,.05);
  --ag-shadow:       0 5px 16px rgba(30,44,38,.05), 0 2px 6px rgba(30,44,38,.04);
  --ag-shadow-lg:    0 16px 40px rgba(30,44,38,.12), 0 6px 14px rgba(30,44,38,.07);
  --ag-ease:         cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
body,
body.vertical-layout {
  font-family: 'Inter', 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--ag-canvas) !important;
  color: var(--ag-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app-content, .content-wrapper, .content-body { background: transparent !important; }

h1,h2,h3,h4,h5,h6,.card-title,.content-header-title,.brand-text,.modal-title,.logincard .card-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  color: var(--ag-ink); letter-spacing: -.01em; font-weight: 600;
}
.content-header-title { font-weight: 600 !important; }

a { color: var(--ag-green); transition: color .15s var(--ag-ease); }
a:hover { color: var(--ag-clay); }

/* Custom scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cdd8d3; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b5c4bd; background-clip: content-box; }

/* ============================================================
   Sidebar
   ============================================================ */
.main-menu,
.main-menu.menu-light,
.main-menu.menu-fixed {
  background: linear-gradient(185deg, var(--ag-sidebar-1) 0%, var(--ag-sidebar-2) 100%) !important;
  box-shadow: 2px 0 24px rgba(16,40,32,.12);
  border: none !important;
}
.main-menu .navigation-background,
.main-menu[data-img] .navigation-background { background: transparent !important; opacity: 0 !important; }

.main-menu .navbar-header {
  background: transparent !important;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.main-menu .navbar-header .brand-text {
  color: #fff !important;
  font-weight: 800; font-size: 1.15rem; letter-spacing: .2px;
}
.main-menu .navbar-header .brand-logo { filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }

.main-menu-content { background: transparent !important; }
.main-menu-content .navigation-main,
.main-menu .navigation { background: transparent !important; margin-top: 6px; }

/* Menu items — high specificity so icon/label colours beat the theme */
.main-menu.menu-light .navigation > li > a,
.main-menu .navigation > li > a,
.menu-light .navigation > li > a {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500; font-size: .93rem;
  margin: 3px 12px; padding: 11px 14px !important;
  border-radius: var(--ag-radius-sm);
  display: flex; align-items: center;
  transition: all .2s var(--ag-ease);
  position: relative;
}
/* Icons: force ALWAYS-visible. Uses text-fill-color to defeat the theme's
   gradient-text trick (transparent fill) that hid icons until hover. */
html body .main-menu .navigation li a i,
html body .main-menu .navigation li a [class^="la-"],
html body .main-menu .navigation li a [class*=" la-"],
html body .main-menu .navigation li a [class^="ft-"],
html body .main-menu .navigation li a [class*=" ft-"] {
  color: rgba(255,255,255,.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,.9) !important;
  -webkit-background-clip: border-box !important;
  background: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform .2s var(--ag-ease), color .2s var(--ag-ease);
  margin-right: 12px !important; font-size: 1.1rem; width: 1.25rem; text-align: center;
}
/* Labels: always visible */
html body .main-menu .navigation li a .menu-title {
  color: rgba(255,255,255,.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,.9) !important;
}
.main-menu.menu-light .navigation > li > a:hover,
.main-menu .navigation > li > a:hover,
.menu-light .navigation > li > a:hover {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  transform: translateX(3px);
}
html body .main-menu .navigation > li > a:hover i,
html body .main-menu .navigation > li > a:hover .menu-title { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.main-menu .navigation > li > a:hover > i { transform: scale(1.12); }

/* Active item */
.main-menu.menu-light .navigation > li.active > a,
.main-menu .navigation > li.active > a,
.main-menu .navigation > li.active > a:hover {
  background: linear-gradient(90deg, var(--ag-clay), var(--ag-clay-dark)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(184,92,56,.32);
  font-weight: 600;
}
html body .main-menu .navigation > li.active > a i,
html body .main-menu .navigation > li.active > a .menu-title { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* Section group headers */
.main-menu .navigation > li.navigation-header {
  color: rgba(255,255,255,.42) !important;
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 18px 26px 7px !important; margin: 4px 0 0 !important;
  background: transparent !important; pointer-events: none;
}
.main-menu .navigation > li.navigation-header span { color: inherit !important; }
.main-menu .navigation > li.navigation-header i { display: none; }

/* ============================================================
   Top navbar
   ============================================================ */
.header-navbar,
.header-navbar.navbar-semi-light,
.header-navbar.navbar-with-menu {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(16,40,32,.06);
  border: none !important;
  transition: box-shadow .25s var(--ag-ease);
}
.header-navbar.ag-scrolled { box-shadow: 0 6px 20px rgba(16,40,32,.10); }
.header-navbar .navbar-nav .nav-link,
.header-navbar .nav-item > .nav-link { color: var(--ag-text) !important; transition: color .15s var(--ag-ease); }
.header-navbar .navbar-nav .nav-link:hover i { color: var(--ag-green); }
.header-navbar .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ag-green-soft); border-radius: 50%; transition: transform .2s var(--ag-ease); }
.header-navbar .avatar:hover { transform: scale(1.06); }

/* Kill the theme's purple→blue gradient (navbar + decorative band) */
body[data-color] .navbar-container,
body.vertical-layout[data-color] .navbar-container,
.navbar-container {
  background-image: none !important;
  background: transparent !important;
}
body[data-color] .content-wrapper-before,
body.vertical-layout[data-color] .content-wrapper-before,
.content-wrapper-before {
  background-image: none !important;
  background: transparent !important;
}
.header-navbar .navbar-container { background: transparent !important; }

/* Content header now sits on cream — make its text dark */
.content-header-title { color: var(--ag-ink) !important; }
.content-header .breadcrumb-item,
.content-header .breadcrumb-item a,
.content-header .breadcrumb a { color: var(--ag-muted) !important; }
.content-header .breadcrumb-item.active { color: var(--ag-green-600) !important; }
.content-header .breadcrumb a:hover { color: var(--ag-green) !important; }

/* Navbar quick-action buttons */
.ag-quick-actions { display: flex; align-items: center; gap: 8px; }
.ag-quick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 10px;
  font-size: .84rem; font-weight: 600; line-height: 1;
  color: var(--ag-text) !important; background: #fff;
  border: 1px solid var(--ag-border); text-decoration: none !important;
  transition: all .18s var(--ag-ease); white-space: nowrap;
}
.ag-quick-btn i { font-size: 1rem; }
.ag-quick-btn:hover { border-color: var(--ag-green-bright); color: var(--ag-green-600) !important; transform: translateY(-1px); box-shadow: var(--ag-shadow-sm); }
.ag-quick-btn.primary { background: linear-gradient(135deg, var(--ag-green-bright), var(--ag-green)); color: #fff !important; border-color: transparent; box-shadow: 0 4px 12px rgba(47,74,56,.24); }
.ag-quick-btn.primary:hover { filter: brightness(1.04); color: #fff !important; }
.ag-navbar-search {
  display: flex; align-items: center; background: #fff;
  border: 1px solid var(--ag-border); border-radius: 10px;
  padding: 2px 4px 2px 12px; transition: border-color .18s var(--ag-ease), box-shadow .18s var(--ag-ease);
}
.ag-navbar-search:focus-within { border-color: var(--ag-green-bright); box-shadow: 0 0 0 3px rgba(60,90,69,.16); }
.ag-navbar-search input { border: none; outline: none; background: transparent; font-size: .86rem; width: 210px; color: var(--ag-text); }
.ag-navbar-search button { border: none; background: transparent; color: var(--ag-muted); cursor: pointer; padding: 6px 8px; transition: color .15s; }
.ag-navbar-search button:hover { color: var(--ag-green); }
@media (max-width: 991px){ .ag-navbar-search input { width: 130px; } .ag-quick-btn span { display:none; } }
@media (max-width: 767px){ .ag-navbar-search { display:none; } }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--ag-card) !important;
  border: 1px solid var(--ag-border) !important;
  border-radius: var(--ag-radius) !important;
  box-shadow: var(--ag-shadow) !important;
  transition: transform .25s var(--ag-ease), box-shadow .25s var(--ag-ease);
  overflow: hidden;
  animation: agFadeUp .5s var(--ag-ease) both;
}
.card:hover { box-shadow: var(--ag-shadow-lg) !important; transform: translateY(-3px); }
.card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ag-border-2);
  padding: 18px 22px 14px;
}
.card .card-header .card-title { font-weight: 700 !important; font-size: 1.02rem; margin: 0; }
.card .card-body, .card .card-block, .card-content { background: transparent !important; }

/* Stagger the first several cards on each page */
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.08s}
.card:nth-child(3){animation-delay:.14s}.card:nth-child(4){animation-delay:.20s}
.card:nth-child(5){animation-delay:.26s}.card:nth-child(6){animation-delay:.32s}

@keyframes agFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  padding: .55rem 1.15rem;
  transition: transform .16s var(--ag-ease), box-shadow .2s var(--ag-ease), background .2s var(--ag-ease), filter .2s var(--ag-ease);
  border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus { box-shadow: 0 0 0 3px rgba(47,74,56,.28) !important; }

.btn,
.btn-primary,
.btn.btn-primary,
button.btn:not(.btn-secondary):not(.btn-danger):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-warning):not(.btn-info):not(.btn-success):not(.close) {
  background: linear-gradient(135deg, var(--ag-green-bright), var(--ag-green)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(47,74,56,.24);
}
.btn-primary:hover,
.btn.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(47,74,56,.30) !important; }

.btn-success { background: linear-gradient(135deg,#4caf7d,#2e7d5b) !important; color:#fff !important; box-shadow: 0 6px 16px rgba(47,74,56,.24); }
.btn-danger  { background: linear-gradient(135deg,#ff6b6b,#e64545) !important; color:#fff !important; box-shadow: 0 6px 16px rgba(230,69,69,.24); }
.btn-warning { background: linear-gradient(135deg,#ffb454,#f5972a) !important; color:#fff !important; box-shadow: 0 6px 16px rgba(245,151,42,.22); }
.btn-info    { background: linear-gradient(135deg,#4fc3f7,#2196f3) !important; color:#fff !important; }

.btn-secondary { background:#eef2f0 !important; color:#42524d !important; box-shadow:none; }
.btn-secondary:hover { background:#e3e9e6 !important; }

.btn-outline-primary { background:transparent !important; color:var(--ag-green) !important; border:1.5px solid var(--ag-green) !important; box-shadow:none; }
.btn-outline-primary:hover { background:var(--ag-green) !important; color:#fff !important; }
.btn-outline-secondary { background:transparent !important; color:#6b7b76 !important; border:1.5px solid #d5ded9 !important; box-shadow:none; }
.btn-outline-secondary:hover { background:#f2f6f4 !important; color:#3a4a45 !important; }

.btn-sm { padding: .34rem .7rem; font-size: .8rem; }

/* ============================================================
   Tables
   ============================================================ */
.table { border-collapse: separate; border-spacing: 0; color: var(--ag-text); }
.table thead th {
  background: #f7faf8 !important;
  color: #566863 !important;
  font-weight: 700; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  border: none !important; border-bottom: 1px solid var(--ag-border) !important;
  padding: 13px 16px; white-space: nowrap;
}
.table tbody td, .table tbody th {
  border: none !important;
  border-bottom: 1px solid var(--ag-border-2) !important;
  padding: 13px 16px; vertical-align: middle; font-size: .9rem;
}
.table tbody tr { transition: background .15s var(--ag-ease), box-shadow .15s var(--ag-ease); }
.table tbody tr:hover { background: #f6faf8 !important; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: none !important; }
.table th { font-weight: 600; }

/* ============================================================
   Forms
   ============================================================ */
.form-control,
input.form-control, select.form-control, textarea.form-control {
  border: 1.5px solid var(--ag-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ag-text) !important;
  padding: .55rem .85rem;
  transition: border-color .18s var(--ag-ease), box-shadow .18s var(--ag-ease);
  box-shadow: none;
}
.form-control:focus {
  border-color: var(--ag-green-bright) !important;
  box-shadow: 0 0 0 3px rgba(47,74,56,.18) !important;
  outline: none;
}
.form-control::placeholder { color: #a9b6b1; }
label, .card-title { color: var(--ag-ink); }
fieldset.form-group { margin-bottom: 1rem; }

/* Switch accent */
.switch input:checked + .slider,
.slider.round { transition: .3s var(--ag-ease); }
.switch input:checked + .slider { background-color: var(--ag-green-bright) !important; }

/* ============================================================
   Badges / chips / pagination
   ============================================================ */
.badge { border-radius: 999px !important; font-weight: 600; padding: .38em .7em; letter-spacing: .01em; }
.badge-primary { background: var(--ag-green-soft) !important; color: var(--ag-green-600) !important; }
.badge-pill.badge-primary { background: var(--ag-green-soft) !important; color: var(--ag-green-600) !important; }
.badge-warning { background: #fff3e0 !important; color: #e07d10 !important; }
.badge-danger { background: #fdecec !important; color: #d64545 !important; }
.badge-success { background: #e6f6ec !important; color: #2e8b57 !important; }
.badge-info { background: #e5f4fd !important; color: #1c86c9 !important; }

.chip { background: var(--ag-green-soft) !important; border: 1px solid #d3eae0 !important; color: var(--ag-green-600) !important; border-radius: 999px !important; }

.pagination { gap: 6px; }
.pagination .page-item .page-link,
.pagination li a {
  border: 1px solid var(--ag-border) !important;
  border-radius: 9px !important;
  color: var(--ag-text) !important;
  margin: 0 2px; transition: all .15s var(--ag-ease);
}
.pagination .page-item.active .page-link,
.pagination li.active a,
.pagination li.active span {
  background: linear-gradient(135deg, var(--ag-green-bright), var(--ag-green)) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 6px 14px rgba(47,74,56,.25);
}
.pagination li a:hover { background: var(--ag-green-soft) !important; border-color: var(--ag-green-bright) !important; }

/* ============================================================
   Modals
   ============================================================ */
.modal-content {
  border: none !important;
  border-radius: 18px !important;
  box-shadow: var(--ag-shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  background: #fbfdfc !important;
  border-bottom: 1px solid var(--ag-border-2) !important;
  padding: 18px 22px;
}
.modal-header .modal-title { font-weight: 700; color: var(--ag-ink); }
.modal-body { padding: 20px 22px; }
.modal-footer { border-top: 1px solid var(--ag-border-2) !important; padding: 14px 22px; }
.modal-backdrop.show, .modal-backdrop.in { background: rgba(20,40,32,.45); }
.modal.fade .modal-dialog { transition: transform .3s var(--ag-ease), opacity .3s var(--ag-ease); }

/* ============================================================
   Select2 to match
   ============================================================ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--ag-border) !important;
  border-radius: 10px !important;
  min-height: 40px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ag-green-bright) !important;
  box-shadow: 0 0 0 3px rgba(47,74,56,.18);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--ag-green-soft) !important;
  border: 1px solid #cfe9dd !important;
  color: var(--ag-green-600) !important;
  border-radius: 8px !important; padding: 2px 8px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ag-green) !important;
}
.select2-dropdown { border: 1px solid var(--ag-border) !important; border-radius: 12px !important; box-shadow: var(--ag-shadow); overflow: hidden; }

/* ============================================================
   Breadcrumb / misc
   ============================================================ */
.breadcrumb { background: transparent !important; padding: 0; }
.breadcrumb-item.active { color: var(--ag-green-600); font-weight: 600; }
hr, .section-divider { border-color: var(--ag-border) !important; }

/* Copy-to-clipboard icons (order number, address fields) */
.ag-copy { cursor: pointer; color: var(--ag-muted); transition: color .15s var(--ag-ease), transform .15s var(--ag-ease); font-size: 1rem; flex-shrink: 0; }
.ag-copy:hover { color: var(--ag-green); transform: scale(1.18); }
.ag-copy.copied { color: var(--ag-green) !important; }
.ag-address .ag-addr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--ag-border-2); }
.ag-address .ag-addr-row:last-of-type { border-bottom: none; }
.ag-address .ag-addr-row > span { flex: 1; min-width: 0; word-break: break-word; }

/* Content header entrance */
.content-header { animation: agFadeUp .45s var(--ag-ease) both; }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, .form-control:focus-visible {
  outline: 2px solid var(--ag-green-bright); outline-offset: 2px;
}

/* ============================================================
   Login page (Ramanous) — forest canvas, cream card, cream logo
   ============================================================ */
body.center {
  min-height: 100vh; margin: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(138,154,91,.28), transparent 60%),
    linear-gradient(165deg, var(--ag-green) 0%, var(--ag-green-600) 55%, var(--ag-green-700) 120%) !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.loginlogo {
  width: auto !important; height: 30px; margin: 0 0 30px !important;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,.3));
}
.logincontainer { height: auto !important; width: 100%; }
.logincard.card {
  width: 380px !important; max-width: 92vw; margin: 0 auto;
  border-radius: 22px !important; border: none !important;
  background: var(--ag-card) !important;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.55) !important;
  animation: agFadeUp .55s var(--ag-ease) both;
  overflow: hidden;
}
.logincard .card-body { padding: 6px 32px; }
.logincard .card-body:first-child { padding: 32px 32px 4px; }
.logincard .card-body:last-child  { padding-bottom: 32px; }
.logincard .card-title { font-size: 1.9rem; color: var(--ag-ink); margin-bottom: 2px; text-align: left; }
.logincard .card-subtitle { color: var(--ag-muted) !important; text-align: left; margin-bottom: 6px; font-size: .9rem; }
.logincard .form-group { margin-bottom: 14px; text-align: left; }
.logincard .form-actions { border: none !important; padding: 0; margin-top: 8px; text-align: center; }
.logincard .btn-outline-primary {
  width: 100%; background: var(--ag-green) !important; color: #fff !important;
  border: none !important; border-radius: 999px !important;
  padding: .85rem !important; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(47,74,56,.32);
}
.logincard .btn-outline-primary:hover { background: var(--ag-green-600) !important; color:#fff !important; transform: translateY(-2px); }
body.center .footer,
body.center .footer.footer-light { background: transparent !important; box-shadow: none !important; border: none !important; margin-top: 22px; }
body.center .footer *, body.center .footer a, body.center .footer span { color: rgba(247,244,236,.72) !important; }
body.center .footer a:hover { color: #fff !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, .card, .content-header { animation: none !important; transition: none !important; }
  .card:hover, .btn:hover { transform: none !important; }
}