/* ==========================================================================
   Base
   ========================================================================== */
body { background-color: rgb(230,230,230); }
.body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  height: 100%;
}
a.active { color: rgb(225,31,143) !important; background-color: #fff; }
h3.title { text-align: center; font-weight: 700; color: #333; }
.logout { color: #999 !important; }
.icon-value { display: none; }

/* Alerts (Bootstrap-compatible) */
.alert { display: flex; align-items: center; justify-content: space-between; }

/* Footer */
.footer .message { text-align:center; padding: 2rem 4rem 1rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-group label { margin-bottom: .5rem; }
.form-control-file { display: block; width: 100%; }

/* Inputs focus ring */
.question .form-control,
.custom-select { border: 3px solid #ced4da; }
.question .form-control:focus,
.custom-select:focus {
  border-color: rgba(225,31,143,.50);
  box-shadow: none;
}

/* Pretty checkboxes */
.alt-checkbox { margin-bottom: .25rem; }
.alt-checkbox input[type="checkbox"]{ position:absolute; left:-9999%; }
.alt-checkbox input[type="checkbox"] + label{
  display:inline-block; padding:10px; cursor:pointer; margin-bottom:10px; width:100%;
  border:1px solid rgb(225,31,143); color:rgb(225,31,143); background:#fff;
}
.alt-checkbox input[type="checkbox"]:checked + label{
  border-color:#fff; color:#fff; background:rgba(225,31,143,.75);
}

/* Pretty radios */
.alt-radio input[type="radio"]{ position:absolute; left:-9999%; }
.alt-radio input[type="radio"] + label{
  display:inline-block; padding:10px 15px; cursor:pointer; margin-bottom:10px; border-radius:25px;
  border:1px solid rgb(225,31,143); color:rgb(225,31,143); background:#fff;
}
.alt-radio input[type="radio"]:checked + label{
  border-color:#fff; color:#fff; background:rgba(225,31,143,.75);
}
.form-check.alt-checkbox,
.form-check.alt-radio { padding-left: 0; }

/* Created today checkbox tweaks */
.created-today { padding-top:10px; }
.created-today input:hover,
.created-today label:hover { cursor:pointer !important; }
.created-today .custom-control-label::before,
.created-today .custom-control-label::after{
  top:.05rem; left:-2rem; width:1.5rem; height:1.5rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-custom {
  background:#fff; border:2px solid rgba(225,31,143,.75); color:rgba(225,31,143,.75);
}
.btn-custom:active,
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:focus:active {
  background:#fff !important; color:rgb(50,50,50) !important;
  border-color:rgb(50,50,50) !important; box-shadow:0 0 0 .25rem rgba(50,50,50,.5) !important;
}
.btn-submit {
  display:flex; margin:0 auto 3rem; padding:.75rem 3rem; font-weight:700; border-radius:5rem; font-size:1rem;
}
.btn-spinner { display:flex; flex-direction:column; align-items:center; }

/* Receipt page action buttons */
.receipt-btns {
  margin:40px 0 50px; text-align:center; display:flex; justify-content:center;
}
.receipt-btns .btn-custom { margin:0 1rem 1rem; align-items:center; }
.receipt-btns .btn-custom i { padding-right:.5rem; }
.receipt-btns a i { margin-right:3px; font-size:14px; }

/* ==========================================================================
   Search UI
   ========================================================================== */
.search-wrap { margin:20px auto 0; padding:0 1.5rem; text-align:center; max-width:1000px; }
.search { width:100%; position:relative; display:flex; flex-direction:column; margin-bottom:0 !important; }
.search label { color:gray; font-size:14px; margin-bottom:.25rem; font-weight:700; }
.search-wrap .form-control:focus {
  box-shadow:0 0 0 .2rem rgba(235,31,143,.37);
  border-color:#E11F8F;
}
.search ::placeholder { color: rgba(225,31,143,.6); }
.searchTerm {
  width:100%; height:50px; padding:5px 25px; border:2px solid rgba(225,31,143,.75);
  border-radius:25px; outline:none; font-weight:700;
}
.searchButton,.saveButton,.clearButton{
  border:none; background:rgba(225,31,143,.75); color:#fff; border-radius:5rem; cursor:pointer;
  font-size:20px; font-weight:700; padding:.6rem 4rem; margin-top:1.5rem;
}
.searchButton:hover,.saveButton:hover,.clearButton:hover{
  box-shadow:0 0 0 .25rem rgba(225,31,143,.5);
}

/* Show-all button */
#show-all {
  width:100%; font-size:80%; border-radius:5rem; letter-spacing:.1rem;
  font-weight:700; padding:.5rem 2rem; transition:.2s;
  background:rgba(225,31,143,.75); border:rgba(225,31,143,.75);
}
#show-all:disabled { background:grey !important; border-color:grey !important; box-shadow:none !important; }

/* Store code */
#store_code { letter-spacing:.1rem; }

/* ==========================================================================
   Tables / DataTables
   ========================================================================== */
#table td { vertical-align:middle; }
.dataTables_info { font-weight:700; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border:1px solid #979797 !important; background:#fff !important; border-radius:50%;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  border:1px solid rgba(225,31,143,.5) !important;
  background:rgba(225,31,143,.5) !important; color:#fff !important; border-radius:50%;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor:default !important; color:#666 !important; border:1px solid transparent !important;
  background:transparent !important; box-shadow:none !important; border-radius:50%;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous { border-radius:10px; }

#table_length { font-weight:700; color:#333; }
#table_length select{
  margin:0 .25rem; padding:.375rem .75rem; font:700 .9rem/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:#333; background:#fff; border-radius:1rem; border-color:rgb(225,31,143); cursor:pointer;
}
#table_length select:focus{
  border-color:rgb(225,31,143) !important;
  box-shadow:0 0 0 .2rem rgba(225,31,143,.25); z-index:2;
}
#table_length select:focus-visible,
.paginate_button:focus-visible { outline:none; }

#table_wrapper { padding:1.5rem; max-width:1250px; margin:0 auto; }
th { vertical-align:middle !important; }

/* Optional sort icons if you have these images */
table.dataTable thead .sorting_asc  { background-image:url("../images/sort_asc.png") !important; }
table.dataTable thead .sorting_desc { background-image:url("../images/sort_desc.png") !important; }

/* ==========================================================================
   Receipt / Invoice layout
   ========================================================================== */
.receipt-content .invoice-wrapper{
  background:#fff; border:1px solid #CDD3E2; box-shadow:0 0 1px #CCC;
  padding:40px 40px 60px; margin-top:40px; border-radius:4px;
}
.receipt-content .invoice-wrapper .payment-info,
.receipt-content .invoice-wrapper .payment-details { margin-top:25px; }
.receipt-content .invoice-wrapper .payment-details span { color:#A9B0BB; display:block; }
.receipt-content .invoice-wrapper .payment-details a { display:inline-block; margin-top:5px; }
.receipt-content .invoice-wrapper .payment-info span { color:#A9B0BB; }
.receipt-content .invoice-wrapper .payment-info strong { display:block; color:#444; margin-top:3px; }
.receipt-content .invoice-wrapper .payment-details {
  border-top:2px solid rgb(235,236,238); padding-top:20px; line-height:22px;
}
.receipt-content .invoice-wrapper .line-items { margin-top:40px; }
.receipt-content .invoice-wrapper .line-items .headers{
  color:#A9B0BB; font-size:13px; letter-spacing:.3px; border-bottom:2px solid rgb(235,236,238); padding-bottom:4px;
}
.receipt-content .invoice-wrapper .line-items .items{
  margin-top:8px; border-bottom:2px solid rgb(235,236,238); padding-bottom:8px;
}
.receipt-content .invoice-wrapper .line-items .items .item{ padding:10px 0; color:#696969; font-size:15px; }
.receipt-content .invoice-wrapper .line-items .items .item-row,
.receipt-content .invoice-wrapper .line-items .items .tax,
.receipt-content .invoice-wrapper .line-items .items .tan-tax{
  display:flex; justify-content:space-between;
}
.receipt-content .invoice-wrapper .line-items .items .desc{ padding-right:3.5rem; }
.receipt-content .invoice-wrapper .line-items .items .item .amount{ letter-spacing:.1px; color:#84868A; font-size:16px; }
.receipt-content .invoice-wrapper .line-items .total{ margin-top:30px; }
.receipt-content .invoice-wrapper .line-items .total .extra-notes{
  float:left; width:200px; text-align:left; font-size:13px; color:#7A7A7A; line-height:20px;
}
.receipt-content .invoice-wrapper .line-items .total .extra-notes strong{ display:block; margin-bottom:5px; color:#454545; }
.receipt-content .invoice-wrapper .line-items .total .field{ margin-bottom:7px; font-size:14px; color:#555; }
.receipt-content .invoice-wrapper .line-items .total .field.grand-total{ margin-top:10px; font-size:16px; font-weight:500; }
.receipt-content .invoice-wrapper .line-items .total .field.grand-total span{ color:rgb(66,135,245); font-size:16px; }
.receipt-content .invoice-wrapper .line-items .total .field span{
  display:inline-block; margin-left:20px; min-width:85px; color:#84868A; font-size:15px;
}
.receipt-content .invoice-wrapper .payments{ display:flex; justify-content:space-between; }
.receipt-content .tax .desc, .receipt-content .tax .amount,
.receipt-content .tan-tax .desc, .receipt-content .tan-tax .amount { color:#A9B0BB !important; }

/* ==========================================================================
   Nav / Sidebar
   ========================================================================== */
.navbar { padding:.5rem 1rem; justify-content:flex-start; }
.top-bar { display:flex; margin-left:2rem; }
.top-bar .nav-item {
  font-size:85%; border-radius:5rem; letter-spacing:.05rem; font-weight:700; padding:1rem 2rem;
  transition:.2s; width:max-content; color:#333;
}
.top-bar .nav-item:hover { color:rgb(225,31,143); }
.view-btn { font-size:80%; border-radius:5rem; letter-spacing:.1rem; font-weight:700; padding:.25rem 2rem; transition:.2s; margin-top:0 !important; }

#sidebar { display:flex; flex-direction:column; }
#sidebar .menu-container { width:350px; height:100%; display:flex; flex-direction:column; flex:1; padding-top:74px; }
#sidebar .nav-link {
  font-weight:700; font-size:1rem; color:#fff; display:flex; align-items:center; flex-direction:row;
}
#sidebar .nav-link.active { background:#333; }
#sidebar .nav-link:hover { background:rgba(225,31,143,.43); }
#sidebar .nav-link.active:hover { background:#333; }
#sidebar .nav-link:hover .feather,
#sidebar .nav-link.active .feather { color:inherit; }
.sidebar-sticky { position:relative; top:0; overflow-x:hidden; overflow-y:auto; padding-bottom:20px; }
.sidebar-sticky a.active { background:rgba(255,255,255,.9) !important; }
.nav-link svg { margin-right:1.25rem; color:#999; }

.sidenav {
  height:100%; width:0; position:fixed; z-index:7; top:0; left:0;
  background:#111; overflow-x:hidden; transition:.5s;
}
.sidenav a { padding:24px; text-decoration:none; color:#fafafa; display:block; transition:.3s; }
.sidenav a:hover { color:#f1f1f1; background:#333; }
.sidenav .closebtn { position:absolute; top:0; right:0; font-size:36px; margin-left:50px; display:flex !important; align-items:center; }
.home-btn {
  position:absolute; top:0; right:227px; font-size:36px; margin-right:50px;
  display:flex !important; align-items:center;
}
.hamburger-menu { height:100%; width:70px; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.hamburger-menu:hover { background:#fff; }

#blackout {
  width:100%; height:100%; position:fixed; background:rgba(0,0,0,.3); z-index:6;
}
.menu-line { height:0; overflow:hidden; border-top:1px solid rgba(51,51,51); margin:0; }

/* ==========================================================================
   Signature Pad
   ========================================================================== */
.sigPad { width:100% !important; margin-bottom:2rem !important; }
.sigPad input {
  width:100% !important; padding:.375rem .75rem !important; border:3px solid #ced4da !important; font-size:1rem !important;
}
.sigPad input:focus { border-color:#80bdff !important; }
.sigWrapper { height:85px !important; width:100%; }
.sigWrapper .typed {
  font: normal 75px/75px "Journal",Georgia,Times,serif;
  height:85px !important; padding:0 10px !important; color:#000 !important;
}
.drawIt .current { background:rgb(42,140,201) !important; }
.sigWrapper.current { border-color:rgb(42,140,201) !important; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.max-width-body { max-width:700px; margin:0 auto; }
.profile-form { margin-bottom:4rem; }
.question { margin:0 0 2rem; }
.question label { font-weight:500; }
select { height:auto !important; }
select option:disabled { background:rgb(200,200,200); }
.ranking { display:flex; align-items:center; margin-top:.5rem; }
.ranking .box { width:auto; margin-right:1rem; }
.ranking label { margin-bottom:0; font-weight:400; }
.spinner-border { margin-top:2rem; }
.save-spin { margin-top:0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .navbar { justify-content:center; flex-direction:column; padding:.5rem 0; }
  .app-logo { margin-bottom:1rem; }
  .top-bar { margin-left:0; }
}
@media (max-width: 768px) {
  #table_wrapper { padding:1.5rem 0; }
  .app-logo { margin-bottom:0; }
  .col-sm-6 { flex:0 0 100%; max-width:100%; text-align:center !important; }
  .footer .message { padding:2rem 0 1rem; }
  .max-width-body { max-width:400px; padding:0 2rem; }
  .search-wrap { max-width:400px; }
  .search { margin-bottom:.5rem !important; }
  .mobile-menu { display:block !important; height:100%; }
  .top-bar { display:none; }
  .searchButton,.saveButton,.clearButton { padding:.75rem 3rem; }
  .app-logo { position:absolute; left:50%; transform:translateX(-50%) scale(90%); }
  .navbar { height:70px; padding:0; justify-content:flex-start; flex-direction:row; }
  .receipt-btns { display:block; }
  .receipt-btns .btn-custom { margin:0 auto 1rem; }
  .receipt-content .invoice-wrapper .line-items .items .item,
  .receipt-content .invoice-wrapper .line-items .items .item .amount { font-size:13px; }
  .receipt-content .invoice-wrapper .line-items .total .extra-notes { width:100%; margin-bottom:30px; float:none; }
  .receipt-content .invoice-wrapper .payment-details .text-right,
  .receipt-content .invoice-wrapper .payment-info .text-right { text-align:left; margin-top:20px; }
  .receipt-content .invoice-wrapper .line-items .items .desc { padding-right:1.6rem; }
  .tablet { display:none; }
  .view-btn { display:none; }
  .view-btn.mobile { display:block !important; padding:.25rem 1rem; }
  .col-md-6,.col-md-4,.col-md-2 { position:relative; max-width:100% !important; width:100%; flex:none; }
}
@media (max-width: 500px) {
  .body { padding:2rem 0 !important; }
  th, tr { font-size:14px; }
  .actions svg { width:16px; height:16px; }
  td { padding:12px 8px !important; }
  th { padding:10px 18px 10px 8px !important; }
  #search-button { width:100%; }
}

/* ==========================================================================
   WebDocs – Cards (single column + animations)
   ========================================================================== */
.page-docs { max-width:720px; margin:2rem auto; padding:0 1rem; }
.page-title { font-weight:700; margin-bottom:1rem; }

.doc-list {
  display:grid;
  grid-template-columns:1fr;     /* always single column */
  gap:20px;
}

/* Card */
.doc-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:16px 18px;

  /* Smooth enter/exit + update highlight */
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    background-color .6s ease;
}

/* Lines inside the card */
.doc-line{
  display:flex; justify-content:space-between; align-items:baseline; padding:8px 0;
}
.doc-line + .doc-line{ border-top:1px dashed rgba(0,0,0,.08); }

/* Text */
.label{ font-weight:600; color:#566; }
.value{ font-variant-numeric: tabular-nums; }

/* Action */
.btn-sign{
  margin-top:12px;
  min-height:48px;
  border-radius:9999px;
  font-weight:700;
}

/* Animation states (used by JS) */
.doc-card.adding{ opacity:0; transform:translateY(-6px); }
.doc-card.adding.show{ opacity:1; transform:none; }
.doc-card.removing{ opacity:0; transform:translateY(4px); }
.doc-card.updated{
  background-color:#f6fbff;
  box-shadow:0 0 0 2px rgba(66,135,245,.18), 0 8px 24px rgba(0,0,0,.06);
}

/* Explicitly keep single column even on wide screens */
@media (min-width: 1024px) {
  .doc-list { grid-template-columns:1fr; }
}

/* WebDocs – modern CTA button */
.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  width:100%;
  padding:14px 18px;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff !important;
  border:0;
  border-radius:14px;
  background:#28a745; /* fallback */
  background-image:linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  background-size:200% 100%;
  box-shadow:0 10px 20px rgba(34,197,94,.18), 0 6px 10px rgba(0,0,0,.06);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-position .2s ease,
    filter .2s ease;
  text-decoration:none !important;
}
.btn-cta:hover{
  background-position:100% 0;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(34,197,94,.22), 0 10px 16px rgba(0,0,0,.08);
}
.btn-cta:active{
  transform:translateY(0);
  filter:saturate(1.1);
}
.btn-cta:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.35), 0 10px 20px rgba(34,197,94,.18);
}

/* Icons inside CTA */
.btn-cta .ico,
.btn-cta .chev{
  width:1.15rem;
  height:1.15rem;
  fill:currentColor;
  flex:0 0 auto;
}
.btn-cta .chev{
  margin-left:.1rem;
  transform:translateX(0);
  transition:transform .2s ease;
}
.btn-cta:hover .chev{ transform:translateX(3px); }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .btn-cta{ transition:none; }
  .btn-cta .chev{ transition:none; }
}

/* Compact header for docs list */
.docs-header{
  display:flex; align-items:center; justify-content:space-between;
  margin: 0 0 12px 0;
}
.docs-title{
  display:flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:1.125rem; color:#222;
}
.docs-ico{ width:1.1rem; height:1.1rem; fill:currentColor; opacity:.7; }
.pill{
  display:inline-block; min-width:1.5rem; padding:.1rem .5rem;
  border-radius:9999px; font-size:.8rem; text-align:center;
  color:#fff; font-weight:700; line-height:1.2;
  background: linear-gradient(90deg, #E11F8F 0%, #A855F7 100%);
  box-shadow: 0 4px 12px rgba(225,31,143,.22);
}
.docs-meta{ font-size:.86rem; color:#6b7280; }

/* On very small screens, stack the header */
@media (max-width:560px){
  .docs-header{ flex-direction:column; align-items:flex-start; gap:.25rem; }
}