/*
  Base styles for all screen sizes (including desktop).
  These are the original styles you provided.
*/
.as_row{
   font-weight:bold;
   border-bottom:1px solid #000000;
   background-color:#faff6b;
}
.sel_holder{
	    border:1px solid #000000;
}
.warning{
   font-weight:bold;
   border-bottom:1px solid #000000;
   background-color:#e08c8c;
}
.no_matches_label{
		  font-weight:bold;
		  border-bottom:1px solid #000000;
}
.row_payed_ok{
           background-color:#a0ff7b;
	  font-size:9pt;
}
.row_payed_note{
          background-color:#faff7b;
	  font-size:9pt;
}
.stats td{
   padding:4px;
}
.sumrow{
   font-weight:bold;
}
.sumrow td{
   background-color:#fffd53;
}

.bill_print_links_secure a.has-urlauth{
   color:red;
}
.bill_table-row.hl-row{
   background-color: #7881d8;
}
.statement-row{
  margin: 0;
}
/* window manager start*/
.mwm_window .button{
   cursor: pointer;
   line-height: 2em;
   padding: 0em 1.5em;
   display:inline-block;
   margin-left: 0.3em;
   color: #ffffff;
   transition: background-color 150ms ease-out;
}
.mwm_window .mvm_title_bar_text{
   cursor: default;
}
.mwm_window .button.green{
   background-color: #61d95e;
}
.mwm_window .button.green:hover{
   background-color: #33a930;
}
.mwm_window .button.red{
   background-color: #d95e5e;
}
.mwm_window .button.red:hover{
   background-color: #a93030;
}
.mwm_window .content-h{
   padding: 1em 0.6em 0.6em 0.6em;
   min-width: 200px;
}
.mwm_window .content-h .text{
   font-size: 1.5em;
}
.mwm_window .buttons-h{
   text-align: right;
   margin-top: 0.5em;
   padding-top: 0.5em;
}

/* window manager end*/
/* renderer-link_structure start */
.renderer-link_structure .field{
   margin-bottom: 0.1em;
}
.renderer-link_structure .field label{
   display: inline-block;
   font-size: 0.9em;
   margin-right: 0.5em;
   min-width: 9em;
}
.renderer-link_structure .submit{
   cursor: pointer;
   text-decoration: none;
   line-height: 2em;
   padding: 0em 1.5em;
   display:inline-block;
   color: #ffffff;
   transition: background-color 150ms ease-out;
   background-color: #61d95e;
}
.renderer-link_structure .submit:hover{
   background-color: #33a930;
}
/* renderer-link_structure end */
/*log-list start*/
.log-list td{
   vertical-align: top;
   padding: 0.2em;
}
.log-list .type-error .type{
   background-color: red;
   color: white;
}
.log-entry.content-h{
   max-height: 500px;
}
/*log-list end*/
.bill-notice{
   display: inline-block;
   color: white;
   background-color: red;
   font-size: 1.2em;
   font-weight: bold;
   width: 1.2em;
   height: 1.2em;
   border-radius: 50%;
   text-align: center;
   cursor: default;
   padding: 0.1em;
}
/* balance start */
.balance td
, .balance th{
   padding: 0.4em;
}
.balance td{
   color: white;
}
.balance .negative{
   background-color: red;
}
.balance .positive{
   background-color: green;
}
.balance-display{
   font-size: 1.2em;
   padding: 0.4em;
}
.balance .payment-trace ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.balance .payment-trace ul ul {
  padding-left: 2em;
}
.balance .payment-trace ul li {
  margin: 0.25em 0;
}
.balance .payment-trace a {
  color: inherit;
}
/* balance end */
/* icon-info start */
.icon-info{
	cursor: default;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	background-color: green;
	color: white;
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
}
/* icon-info end */
/* accounts table start */
#accounts_table table{
	width: 100%;
}
#accounts_table select{
	width: 10em;
}
#accounts_table .hilight-row{
	background-color: blue;
}
#accounts_table .edit-row{
	background-color: green;
}
/* accounts table end */
.scroll-wrap{
	overflow-y: auto;
	display: inline-block;
}
.is-forgotten{
	opacity: 0.3;
}

.hlAnchor{
  outline: dashed green;
}
.hl-pm-inv-rel, .bill_table-row:hover, .payment-row:hover, .hl-pm-inv-rel-l{
  outline: dashed orange;
}
.invoice-trace .v-wrap {
  margin-right: 3em;
}
.invoice-trace .v-wrap .v-label {
  margin-right: 0.5em;
}
.invoice-trace .v-wrap .v-value {
  font-weight: bold;
}
.invoice-trace ul {
  list-style: none;
  padding-left: 0;
}
.invoice-trace ul ul {
  padding-left: 2em;
}
.invoice-trace li {
  border: 1px solid #d6d6d6;
  padding: 0.5em;
  margin-bottom: 0.5em;
}
.invoice-trace pre {
  background-color: #fffee5;
  padding: 0.5em;
}
.hl-info{
  cursor: pointer;
}
/* generic helper classes start*/
.table-full-width{
  width: 100%;
}
.child-table-full-width > table{
  width: 100%;
}
/* generic helper classes end*/
.post-return-msg a{
   display: flex;
   align-items: center;
   text-decoration: none;
}
.post-return-msg a img{
   margin: 0.2rem;
   margin-right: 0.5rem;
}

/*
  New search bar styles for all pages.
  This is designed to work with the HTML from gcdb.php.
*/

/* Container for the search form to enable flexbox for alignment */
.search-form-inline {
    display: inline-flex;
    align-items: center;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px; /* Space between search and other icons */
}

/* The search input field */
.search-form-inline input[type="text"] {
    border: none;
    padding: 5px;
    font-size: 14px;
    width: 200px; /* Default desktop width */
}

/* The magnifying glass button */
.search-form-inline button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 5px;
    margin: 0;
    font-size: 1.2em; /* Makes the icon a good size */
    color: #444;
}

/* Make sure the icons and search bar are vertically centered */
.header table tr td {
    padding: 0 5px;
    vertical-align: middle;
}

/*
  Mobile-specific styles for the header and search bar.
*/
@media (max-width: 768px) {
    /* Ensure the search form stacks on its own line */
    .search-form-inline {
        width: 90%;
        margin: 10px auto;
        display: flex;
    }

    /* Make the input field fill the available space on mobile */
    .search-form-inline input[type="text"] {
        flex-grow: 1;
        width: auto;
    }

    /* Adjust header table on mobile */
    .header table {
        display: block;
        width: 100%;
    }
    .header table tr td {
        display: block;
        width: 100%;
        text-align: center;
    }
    .header table tr td:first-child {
        text-align: left;
    }
}
.news-item {
    padding: 1em;
}

.news-heading {
    font-size: 1.3em;
    font-weight: normal;
}

.darkdata {
     padding: 1em;
}

/* ==========================================================================
   Modern Table & UI Enhancements for Magnic Bill
   ========================================================================== */

/* Modern Font & Base Polish */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #1e293b;
}

/* Global Table Reskin (Affects legacy tables like listunpayed, search, etc.) */
table[bgcolor="#264b99"], table[bgcolor="#264B99"] {
    background-color: #cbd5e1 !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

tr.odd {
    background-color: #ffffff !important;
}

tr.even {
    background-color: #f8fafc !important;
}

tr.odd:hover, tr.even:hover {
    background-color: #f1f5f9 !important;
}

tr.odd td, tr.even td {
    padding: 8px 12px !important;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}

/* Modern Alert Boxes */
.alert-box {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}
.alert-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* Modern Component Suite: .bill-modern-* */
.bill-modern-wrap {
    padding: 20px 24px;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.bill-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.bill-page-title h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.bill-page-title p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* Stats KPI Cards */
.bill-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bill-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.bill-kpi-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 4px;
}

.bill-kpi-val {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.bill-kpi-val.highlight {
    color: #2563eb;
}

.bill-kpi-val.warn {
    color: #d97706;
}

/* Filter / Search Bar */
.bill-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    gap: 14px;
    flex-wrap: wrap;
}

.bill-search-box {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    width: 320px;
    max-width: 100%;
}

.bill-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 100%;
    color: #1e293b;
}

.bill-search-box input::placeholder {
    color: #94a3b8;
}

/* Modern Table Container */
.bill-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
    margin-bottom: 24px;
}

.bill-modern-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.bill-modern-table thead th {
    background: #f8fafc;
    color: #475569;
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-top: none;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.bill-modern-table thead th label {
    color: #475569;
    font-weight: 700;
    user-select: none;
}

.bill-modern-table thead th input[type="checkbox"],
.bill-modern-table tbody td input[type="checkbox"] {
    accent-color: #2563eb;
    cursor: pointer;
}

.bill-modern-table tbody tr {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}

.bill-modern-table tbody tr:last-child {
    border-bottom: none;
}

.bill-modern-table tbody tr:nth-child(even) {
    background-color: #fbfcfe;
}

.bill-modern-table tbody tr:hover {
    background-color: #f1f5f9 !important;
}

.bill-modern-table tbody td {
    padding: 11px 14px;
    vertical-align: middle;
    color: #334155;
}

/* Pills & Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-neutral { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.badge-info { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.badge-success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.badge-warning { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.badge-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

/* Action Buttons */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid;
    transition: all 0.15s ease;
    cursor: pointer;
}

.btn-pill-primary {
    background: #eff6ff;
    color: #1d4ed8 !important;
    border-color: #bfdbfe;
}
.btn-pill-primary:hover {
    background: #2563eb;
    color: #ffffff !important;
    border-color: #2563eb;
}

.btn-pill-secondary {
    background: #f8fafc;
    color: #475569 !important;
    border-color: #cbd5e1;
}
.btn-pill-secondary:hover {
    background: #e2e8f0;
    color: #1e293b !important;
}

.btn-pill-warning {
    background: #fffbeb;
    color: #b45309 !important;
    border-color: #fde68a;
}
.btn-pill-warning:hover {
    background: #fef3c7;
    color: #92400e !important;
    border-color: #fcd34d;
}

.btn-pill-danger {
    background: #fef2f2;
    color: #dc2626 !important;
    border-color: #fecaca;
}
.btn-pill-danger:hover {
    background: #fee2e2;
    color: #b91c1c !important;
    border-color: #fca5a5;
}

/* Bottom Action Bar */
.bill-bottom-bar {
    position: sticky;
    bottom: 14px;
    background: #ffffff;
    color: #1e293b;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    z-index: 100;
    margin-top: 16px;
}

.bill-bottom-bar .info {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.bill-bottom-bar .actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-save-primary {
    background: #2563eb;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    transition: all 0.15s ease;
}
.btn-save-primary:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.35);
}

/* Empty State Card */
.bill-empty-state {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
}