/* Theme: D’Rizo Café - shared stylesheet for multiple views */
:root{
  --navy: #4a2418;
  --navy-2: #21120e;
  --accent: #b97845;
  --muted: #746962;
  --coffee: #5b2d1f;
  --crema: #f4e4d2;
  --cream: #fbf7f2;
  --charcoal: #2d2926;
  --card-bg: #ffffff;
  --soft-shadow: 0 8px 24px rgba(74,36,24,0.09);
}

html, body { background: var(--cream); color: var(--charcoal); }
.topbar { background: linear-gradient(90deg, var(--navy-2), var(--coffee)) !important; }
.button-menu-mobile { background-color: var(--navy-2) !important; }
.left.side-menu { background: linear-gradient(180deg, #21120e 0%, #4a2418 58%, #6b3924 100%) !important; }
.content-page { background: var(--cream); }
.page-title-box { background: #fffdfb; }
.portlet-heading, .portlet-heading.bg-primary, .panel-heading, .card-header { background: linear-gradient(90deg, var(--navy-2), var(--coffee)) !important; }
.btn-primary, .btn-elegant, .bg-primary, .label-primary { background-color: var(--coffee) !important; border-color: var(--coffee) !important; color: #fff !important; }
.btn-primary:hover, .btn-elegant:hover { background-color: #35170f !important; border-color: #35170f !important; }
.text-primary { color: var(--coffee) !important; }
.table thead, .thead-light { background: var(--crema); color: var(--charcoal); }
.badge-primary { background-color: var(--coffee) !important; }
.ingredients-page .btn-primary { background: var(--coffee) !important; border-color: var(--coffee) !important; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 .15rem rgba(185,120,69,.16); }

/* Sidebar contrast: keep every navigation state readable. */
#sidebar-menu > ul > li > a,
#sidebar-menu > ul > li > a span,
#sidebar-menu ul li.has_sub > ul li a,
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li > ul a { color: #f8eee4 !important; }
#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus,
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a { background: #8b4d2f !important; color: #fff !important; border-left-color: #d6a06b !important; }
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li > a.active:hover,
#wrapper.enlarged .left.side-menu #sidebar-menu a.subdrop { background: #f4e4d2 !important; color: #4a2418 !important; border-left-color: #d6a06b !important; }
#sidebar-menu > ul > li > a.active span,
#wrapper.enlarged .left.side-menu #sidebar-menu a.subdrop span { color: #4a2418 !important; }
#sidebar-menu ul li.has_sub > ul,
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul,
#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul { background: #321811 !important; border: 1px solid rgba(244,228,210,.18) !important; border-radius: 8px; box-shadow: 0 10px 24px rgba(20,8,4,.28); }
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a,
#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul a,
#sidebar-menu ul li.has_sub > ul li a { background: #321811 !important; color: #f8eee4 !important; border: 0 !important; box-shadow: none !important; }
#sidebar-menu ul li.has_sub > ul li a:hover,
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a:hover,
#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul a:hover { background: #6b3924 !important; color: #fff !important; }
#wrapper.enlarged .menu-title,
#wrapper.enlarged .menu-arrow { display: inline !important; color: #e8cdb6 !important; }

/* Keep the complete navigation reachable, even when the menu is taller than the viewport. */
#wrapper.enlarged .left.side-menu {
  top: 70px !important;
  bottom: auto !important;
  height: calc(100vh - 70px) !important;
  height: calc(100dvh - 70px) !important;
  max-height: calc(100vh - 70px) !important;
  max-height: calc(100dvh - 70px) !important;
  overflow: hidden !important;
}
#wrapper.enlarged .left.side-menu > .slimScrollDiv {
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(232,205,182,.55) transparent;
  scrollbar-width: thin;
}
#wrapper.enlarged .left.side-menu > .slimScrollDiv::-webkit-scrollbar,
#wrapper.enlarged .left.side-menu > .sidebar-inner.slimscrollleft::-webkit-scrollbar {
  width: 6px;
}
#wrapper.enlarged .left.side-menu > .slimScrollDiv::-webkit-scrollbar-thumb,
#wrapper.enlarged .left.side-menu > .sidebar-inner.slimscrollleft::-webkit-scrollbar-thumb {
  background: rgba(232,205,182,.48);
  border-radius: 8px;
}
#wrapper.enlarged .left.side-menu > .slimScrollDiv > .sidebar-inner.slimscrollleft {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
#wrapper.enlarged .left.side-menu > .sidebar-inner.slimscrollleft {
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(232,205,182,.55) transparent;
  scrollbar-width: thin;
}

/* Give expanded navigation groups a clear, readable nested-menu treatment. */
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li.has_sub > ul,
#wrapper .left.side-menu #sidebar-menu > ul > li.has_sub > ul {
  background: rgba(22,10,7,.48) !important;
  border: 1px solid rgba(232,205,182,.16) !important;
  border-left: 2px solid #b97845 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(12,5,3,.15) !important;
  margin: 4px 8px 12px 48px !important;
  padding: 6px !important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li.has_sub > ul > li > a,
#wrapper .left.side-menu #sidebar-menu > ul > li.has_sub > ul > li > a {
  background: transparent !important;
  border-radius: 7px !important;
  color: #f8eee4 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  margin: 2px 0 !important;
  min-height: 36px !important;
  padding: 9px 10px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  transition: background-color .16s ease, color .16s ease, padding-left .16s ease;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li.has_sub > ul > li > a:hover,
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li.has_sub > ul > li > a:focus,
#wrapper .left.side-menu #sidebar-menu > ul > li.has_sub > ul > li > a:hover,
#wrapper .left.side-menu #sidebar-menu > ul > li.has_sub > ul > li > a:focus {
  background: rgba(185,120,69,.24) !important;
  color: #fff !important;
  padding-left: 13px !important;
  text-decoration: none;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li.has_sub > ul > li > a.active,
#wrapper .left.side-menu #sidebar-menu > ul > li.has_sub > ul > li > a.active {
  background: #f4e4d2 !important;
  color: #4a2418 !important;
  font-weight: 700;
}

/* Cards / Panels / Portlets */
.portlet, .panel, .card{
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  background: var(--card-bg);
}
.portlet-heading, .panel-heading, .card-header{
  background: linear-gradient(90deg,var(--navy), var(--navy-2));
  color: #fff;
  padding: 12px 16px;
}
.portlet-title, .panel-title, .card-title{
  font-family: 'Times New Roman', Georgia, serif;
  font-weight: 700;
  margin: 0;
}
.portlet-body, .panel-body, .card-body{
  background: var(--card-bg);
  padding: 18px;
}

/* Forms & Inputs */
.form-control{
  border-radius: 8px;
  border: 1px solid #e6e9ef;
  box-shadow: none;
}
.input-group .btn, .btn{
  border-radius: 8px;
}

/* Buttons */
.btn-elegant{
  background: var(--navy);
  color: #fff;
  border: none;
}
.btn-elegant-outline{
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-elegant-outline:hover{
  background: var(--navy);
  color: #fff;
}

/* Small utilities */
.outer_div, .outer_img{ margin-top: 12px; }
.table-responsive{ border-radius: 8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
#sidebar-backdrop{ display:none; }
.text-muted-elegant{ color: var(--muted); }

/* Icon badges used in menu/cards */
.icon-badge{
  width: 44px; height: 44px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:#fff;
}
.icon-badge.navy{ background: var(--navy); }
.icon-badge.gold{ background: var(--accent); }

/* Page-specific helpers */
.new-compra-header{ display:flex; align-items:center; gap:12px; }
.new-compra-actions{ margin-top:12px; }

/* Responsive tweaks */
@media (max-width: 768px){
  .new-compra-header{ flex-direction:column; align-items:stretch; }
}

/* Shared tablet and phone layout for all application views. */
@media (max-width: 768px){
  html, body { width:100%; min-width:320px; height:100%; overflow:hidden; }
  body { position:relative; }
  #wrapper { width:100%; height:100%; min-height:100vh; overflow:hidden; }
  .topbar { right:0; width:100%; }
  .topbar .topbar-left { width:56px !important; min-width:56px; }
  .topbar .topbar-left .logo { display:flex; height:70px; align-items:center; justify-content:center; font-size:0; }
  .topbar .topbar-left .logo img { width:38px; height:38px; margin:0; }
  .navbar-custom { min-height:70px; margin-left:56px !important; }
  .navbar-custom > ul.list-inline.float-right { margin-right:8px; }
  .navbar-custom .nav-user { padding:0 8px !important; }
  .button-menu-mobile { width:52px; height:70px; padding:0; }
  #wrapper.enlarged .left.side-menu {
    position:fixed !important;
    z-index:1001;
    top:70px;
    right:auto;
    bottom:0;
    left:0 !important;
    width:min(280px, 86vw) !important;
    min-width:min(280px, 86vw) !important;
    max-width:min(280px, 86vw) !important;
    height:calc(100vh - 70px);
    margin:0;
    padding:0 0 12px;
    overflow-x:hidden;
    overflow-y:auto;
    left:-300px !important;
    transform:none !important;
    transition:left .22s ease;
    box-shadow:8px 0 24px rgba(33,18,14,.28);
  }
  body.sidebar-open #wrapper.enlarged .left.side-menu { left:0 !important; }
  #sidebar-backdrop {
    display:block;
    position:fixed;
    z-index:9;
    inset:70px 0 0;
    width:100%;
    height:calc(100% - 70px);
    padding:0;
    border:0;
    background:rgba(20,12,9,.42);
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;
  }
  body.sidebar-open #sidebar-backdrop { opacity:1; visibility:visible; }
  body #wrapper.enlarged .content-page {
    width:100%;
    height:calc(100vh - 70px);
    margin:0 !important;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .content-page > .content {
    margin-top:70px;
    margin-bottom:0;
    padding:16px 12px 24px;
  }
  .content-page > .content > .container-fluid,
  .content-page > .content > .container {
    width:100%;
    max-width:100%;
    padding-right:4px;
    padding-left:4px;
  }
  .content-page .row { margin-right:-8px; margin-left:-8px; }
  .content-page .row > [class*="col-"] { padding-right:8px; padding-left:8px; }
  .page-title-box { padding:14px; margin:-16px -12px 18px; }
  .page-title-box .page-title { font-size:20px; }
  .card-box { padding:14px; }
  .portlet-body, .panel-body, .card-body { padding:14px; }
  .footer {
    position:static;
    width:100%;
    padding:14px 12px;
    text-align:center !important;
  }
  .table-responsive {
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .table-responsive > .table { min-width:600px; margin-bottom:0; }
  .form-control, select.form-control, textarea.form-control { max-width:100%; }
  .form-inline { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
  .form-inline .form-group { max-width:100%; }
  .form-inline .form-control { max-width:100%; }
  .btn, .form-control, select, input[type="button"], input[type="submit"] { min-height:40px; }
  .modal-dialog { width:auto; max-width:calc(100% - 24px); margin:12px auto; }
  .modal-content { max-height:calc(100vh - 24px); overflow-y:auto; }
  img, video, canvas, svg { max-width:100%; }
  pre { max-width:100%; overflow-x:auto; }
}

@media (max-width: 575px){
  .content-page > .content { padding:12px 8px 20px; }
  .content-page > .content > .container-fluid,
  .content-page > .content > .container { padding-right:2px; padding-left:2px; }
  .page-title-box { padding:12px; margin:-12px -8px 14px; }
  .page-title-box .page-title { font-size:18px; }
  .card-box, .portlet-body, .panel-body, .card-body { padding:12px; }
  .content-page .row > .col-sm-1, .content-page .row > .col-sm-2,
  .content-page .row > .col-sm-3, .content-page .row > .col-sm-4,
  .content-page .row > .col-sm-5, .content-page .row > .col-sm-6,
  .content-page .row > .col-sm-7, .content-page .row > .col-sm-8,
  .content-page .row > .col-sm-9, .content-page .row > .col-sm-10,
  .content-page .row > .col-sm-11, .content-page .row > .col-sm-12 {
    flex:0 0 100%;
    max-width:100%;
  }
  .btn-toolbar, .btn-group, .pagination { flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce){
  #wrapper.enlarged .left.side-menu, #sidebar-backdrop { transition:none !important; }
}