/* General styles */

/* Add your styles here */
body {
    font-family: Arial, sans-serif;
}
body.noscroll {
    overflow: hidden;
}
editprofile{
    float: right;
}
header {
    background-color: #333;
    color: white;
    padding: 10px 0;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

header nav ul li {
    margin: 0 15px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

footer {
    text-align: center;
    padding: 20px 0;
    background-color: #f1f1f1;
    margin-top: 20px;
}
/*   */


body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
}

header {
    background-color: #343a40;
    color: white;
    padding: 10px 0;
}

header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

header nav ul li {
    display: inline;
    margin: 0 15px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}
/*ICON STYLES FOR MANAGE*/
.icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
}
.icon-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    text-decoration:none;
    color:#007bff;
    border-radius:4px;
}
.icon-btn.view{
}
.icon-btn.approve{
    color:green;
}
.icon-btn.reject{
    color:red;
}
.icon-btn.edit{
    color:#00305f;
}
.icon-btn.delete{
    color:red;
}
.icon-btn.process{
    color: #007bff;
}
.icon-btn.copy{
    color: #28A745;
}
.icon-btn.pending{
    color: #8B8000;
}
.icon-btn.draft{
    color:gray;
}
.icon-btn:hover {
    background: rgba(0,0,0,0.1);
    border-radius: 6px;
}
.icon-svg {
    width:20px;
    height:20px;
    display:block;
}

.action-links a, .action-links button {
    margin-right: 0px;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.btn-icon {
    padding: 0;
}

main {
    padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow:visible;
}

table, th, td {
    border: 2px solid black;
}

th, td {
    padding: 8px;
    text-align: left;
}

th {
    background-color: #00305f;
    color: white;
}
/* make the table layout predictable so column widths are respected */
.table-fixed {
    table-layout: fixed;
    width: 100%;
}

/* Allow normal wrapping and force breaks of long unbroken tokens.
   Use !important to override Bootstrap rules if necessary. */
.table-fixed th,
.table-fixed td {
    white-space: normal !important;        /* allow wrapping */
    overflow-wrap: anywhere !important;    /* break long words if needed */
    word-break: break-word !important;     /* fallback */
    vertical-align: top;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* Limit the description column width so it wraps instead of stretching the whole table.
   Adjust the value (e.g. 40ch or 40%) to taste. */
.table-fixed .col-desc {
    max-width: 40ch;       /* use ch for characters or % for relative widths */
    /* optionally force a min-height if you want uniform row height:
       min-height: 3.5rem;
    */
}

/* Make supplier column narrower */
.table-fixed .col-supplier {
    max-width: 18ch;
}

/* Keep numeric/price columns compact (optional) */
.table-fixed .col-qty,
.table-fixed .col-price {
    white-space: nowrap !important; /* keep numbers on one line */
    text-align: right;
}

/* For extremely long tokens (base64 or long URLs) you can use this more aggressive rule */
.table-fixed .break-all {
    word-break: break-all !important;
}
.status-draft{
    background-color: #f0f0f0;
    color: #333;
}
.status-processing{
    background-color:#007bff;
    color: #00305f;
}
.status-pending{
    background-color: #fff3cd;
    color: #856404;
}
.status-completed{
    background-color: #006400;
    color: #d4edda;
}
.status-ordered{
    background-color: #FDAA48;
    color: white;
}
.status-delivered{
    background-color: #d4edda;
    color: #155724;
}
.status-rejected{
    background-color: #f8d7da;
    color: #721c24;
}
.status-archived{
    background-color: #EDE7F6;
    color: #4B0082;
}
.status-unknown{
    background-color: #eeeeee;
    color: #333;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* Error message styles */
#error_message {
    color: red;
}
.help-block{
    content: "*";
    color:red;
}

/* Modal styles */
.dynamic-iframe-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}
.dynamic-iframe-modal {
  position: fixed;
  left: 50%;
  top: 5vh;
  transform: translateX(-50%);
  width: 90%;
  max-width: 900px;
  background: white;
  z-index: 1001;
  border-radius: 6px;
  overflow: hidden;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.dynamic-iframe-close {
  position: absolute;
  right: 8px;
  top: 4px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}
.dynamic-iframe {
  display: block;
  width: 100%;
  border: 0;
}

.iframe-modal {
    display: none;
    position: fixed;
    inset:0;
    z-index:2000;
}
.iframe-modal.active {
    display: block;
}
.iframe-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}
.iframe-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    height: auto;
    max-height: calc(100vh - 40px);
    padding: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1050;
}
.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
/*    flex: 1 1 auto;*/
}
html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.table-wrapper {
    padding-top: 10px;
    position: relative;
}
.action-button {
    position: relative;
    margin-left: 8px;
    float: right;
    bottom: 12px;
    z-index: 20;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.back-button {
    position: relative;
    float: left;
    left: 12px;
    bottom: 12px;
    z-index: 20;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Form styles */
form label {
    display: block;
    margin-bottom: 5px;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

form button:hover {
    background-color: #0056b3;
}

.flashes {
    list-style-type: none;
    padding: 0;
}

.flashes li {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
}

.flashes li.info {
    background-color: #d1ecf1;
    color: #0c5460;
}

.flashes li.success {
    background-color: #d4edda;
    color: #155724;
}

.flashes li.warning {
    background-color: #fff3cd;
    color: #856404;
}

.flashes li.error {
    background-color: #f8d7da;
    color: #721c24;
}

#additional_items_list {
    list-style-type: none;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.additional-item {
    padding: 5px;
    cursor: pointer;
}

.additional-item.selected {
    background-color: #e0e0e0;
}

/* Center the entire DataTables container */
.dataTables_wrapper {
    margin: 0 auto;
    display: flex;
    max-width: 1500px;
    flex-direction: column;
    align-items: center; /* Centers the Search and Length boxes */
}

.dt-bottom {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 16px 20px 0 20px;
    box-sizing: border-box;
    position: relative;
}

.dt-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Pagination and length on the same row */
.dt-center-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin-bottom: 4px;
}

/* Info text below */
.dt-center-info {
    font-size: 0.85rem;
    color: #555;
    text-align: center;
}

/* Submit button pinned to the right */
.dt-bottom-right {
    position: absolute;
    right: 20px;
    top: 16px;
}

.dt-bottom .paging {
    font-size: 10pt;
}

.dt-top {
    position:relative;
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 0 20px
}

.dt-top .left {
    padding-top: 5.5rem;
    padding-left: 2rem;
    margin-right: auto;
    display: flex;
    align-items: center;
    width: 33%;
}

.dt-top .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 33%;
}

.dt-top .right {
    padding-top: 6rem;
    padding-right: 2rem;
    flex: 0 0 auto;
    width: 33%; /* adjust width to whatever balances the left side */
}
.dt-top .paging {
    font-size: 10pt;
    margin-bottom:0.5rem;
}
.dt-top .center .length,
.dt-top .center .info,
.dt-top .center .paging {
margin-top: 0.5rem;
}
@media (max-width: 768px) {
  .dt-top { display: block; }
  .dt-top .left,
  .dt-top .center,
  .dt-top .right {
    width: 100%;
    margin-top: .5rem;
    text-align: center; /* optionally center search on mobile */
  }
  .dt-top .left { text-align: left; }
  .dt-bottom { display: block; }
  .dt-bottom .left,
  .dt-bottom .center,
  .dt-bottom .right {
    width: 100%;
    margin-bottom: .5rem;
    text-align: center; /* optionally center search on mobile */
  }
  .dt-bottom .left { text-align: left; } /* if you prefer search left on mobile, keep this *//* if you prefer search left on mobile, keep this */
}

#openPRBtn {
    margin-top: 10px;
}

/* Force the table itself to center */
#prviewtable {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important; /* Allow it to shrink smaller than 100% */
    min-width: 80%;         /* Optional: keeps it from being too tiny */
    font-size: 0.9rem;      /* Keeps columns compact to fit on screen */
}

/* Ensure headers and cells are centered */
#prviewtable th, #prviewtable td {
    text-align: center !important;
    padding: 8px 12px !important;
}
#prviewtable tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}
#prviewtable tbody tr:hover {
    background: #e8f0fe !important;
}

.navbar-custom {
    height: 60px;
    background-color: #00305f; /* your color */
}
body.has-navbar-padding{
    padding-top:70px;
}
.navbar-custom .navbar-brand,.navbar-custom .nav-link {
    color: white !important;
}
.navbar-custom .nav-link:hover {
    color: #e6f0ff;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
}
.nav-button {
    background-color: rgba(0,0,0,0);
}
div.pdftable{
    height: 5px;
}

.btn-primary {
    background-color: #00305f;
    border-color: #00305f;
}
.no-pointer, no-pointer:hover {
    cursor: default !important;
}
#app-version {
    position: fixed;
    left: 8px;
    bottom: 8px;
    font-size: 12px;
    color: #666;
    background: rgba(255,255,255,0.8); /* optional */
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none; /* prevents clicks on it */
    user-select: none;     /* prevent text selection when dragging */
}
.pr-status-banner .action-button {
    float: none !important;
    bottom: auto !important;
    position: static !important;
    margin-left: 0 !important;
}