/* Client Management Module - Custom Styles */

/* =========================== */
/* Navbar Styling             */
/* =========================== */

/* White text color in navbar for "Client Management" when module is accessible */
#mainmenua_client_management,
#mainmenuspan_client_management,
a[id="mainmenua_client_management"],
span[id="mainmenuspan_client_management"] {
    color: #fff !important;
    background: transparent !important;
}

/* =========================== */
/* Sidebar Menu Styling       */
/* =========================== */

/* Client Management sidebar parent items */
#left-div a.vsmenu[href*="/client_management/prospects.php"],
#left-div a.vsmenu[href*="/client_management/customers.php"],
.blockvmenu .vsmenu[href*="/client_management/prospects.php"],
.blockvmenu .vsmenu[href*="/client_management/customers.php"],
.blockvmenuimpair .vsmenu[href*="/client_management/prospects.php"],
.blockvmenuimpair .vsmenu[href*="/client_management/customers.php"],
.blockvmenupair .vsmenu[href*="/client_management/prospects.php"],
.blockvmenupair .vsmenu[href*="/client_management/customers.php"] {
    color: #2d2d2d !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Client Management sidebar child items */
#left-div a.vsmenu[href*="/client_management/"][href*="client_type="],
.blockvmenu .vsmenu[href*="/client_management/"][href*="client_type="],
.blockvmenuimpair .vsmenu[href*="/client_management/"][href*="client_type="],
.blockvmenupair .vsmenu[href*="/client_management/"][href*="client_type="] {
    color: #6f6f6f !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Fix any remaining white text for Client Management left menu links */
#left-div a[href*="/client_management/"],
.blockvmenu a[href*="/client_management/"],
.blockvmenuimpair a[href*="/client_management/"],
.blockvmenupair a[href*="/client_management/"] {
    color: #2d2d2d !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* Form styling */
.form-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 15px;
    /* font-weight: 500; */
    padding: 18px 0px;
    margin-bottom: 0;
    color: #2a2a2a;
}

.form-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form-container {
    border: 1px solid #cccccc;
    margin-bottom: 18px;
    border-radius: 0 0 6px 6px;
    padding: 18px;
    /* margin: 0 18px 12px 18px; */
    background-color: #ffffff;
    max-width: calc(100% - 36px);
    width: auto;
}


.tableforfieldcreate td {
    vertical-align: top;
}

.role_input_wrapper {
    margin-top: 5px;
}

button[type="submit"],
input.button-save,
input.button-cancel {
    cursor: pointer;
}


/* Card-style detail layout */
.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 15px;
}
.card-left {
    border: 1px solid #CCC;
    box-shadow: 3px 3px 4px #DDD;
    padding: 4px;
    height: 80px;
    width: 80px;
    object-fit: contain;
    display: flex;
    vertical-align: middle;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.card-left img, .card-left svg {
    width: 80px !important;
    height: 80px !important;
}
.card-title h1 {
    margin: 0;
    font-size: 18px;
    color: #2a2a2a;
}
.card-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.back-to-list {
    color: #244a6b;
    text-decoration: none;
    font-weight: 700 !important;
}
.button-open {
    background: #5cb85c;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
}
.card-separator {
    border-top: 2px solid #371871;
    margin: 0 18px 12px 18px;
}

.card-header .fas {
    font-size: 2.5em;
}

.card-body { padding: 0 18px 18px 18px; }
.card-columns { display: flex; gap: 4rem; }
.card-col { flex: 1; }
.card-field { display: flex; padding: 8px 8px; align-items: flex-start; }
.card-label { width: 140px; color: #6b6b6b; font-weight: 600; }
.card-value { flex: 1; color: #222; padding: 0px 100px;}

/* Move all fields to left side (single column) */
.card-col-left {
    width: 100%;
    max-width: 100%;
}
.card-col-right {
    width: 100%;
    float: left;
    padding-bottom: 18px;
    box-sizing: border-box;
}

/* Action buttons outside the border */
.card-actions-wrapper {
    margin: 0 18px 12px 18px;
    max-width: calc(100% - 36px);
    width: auto;
    text-align: right;
}
.tabsAction .butAction, .tabsAction .butActionDelete { margin-left: 8px; }

/* Card panel border - with border around content */
.card-panel {
    border: 1px solid #CCC;
    border-radius: 3px;
    background: #fff;
    margin: 0 0px 0px 0px;
    overflow: hidden;
    max-width: calc(100% - 16px);
    width: auto;
}

/* Tabs outside the border - at top left */
.tabs-wrapper {
    margin: 0px 0px 0 0px;
    max-width: calc(100% - 36px);
    width: auto;
}

.tabs {
    margin: 0;
    padding: 0;
}
.tabs .tabtitle {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0px;
    /* align-items: flex-end; */
    background: transparent;
    border: none;
}
.tabs .tabtitle li {
    margin: 0;
    padding: 10px 20px;
    border: 1px solid #CCC;
    border-bottom: none;
    border-radius: 0px 0px 0 0;
    cursor: pointer;
}
.tabs .tabtitle li.active {
    background: #fff;
    border-color: #e0e0e0;
    border-top: 2px solid #111;
    font-weight: 700;
    position: relative;
    bottom: 0px;
    padding-bottom: 11px;
}
.tabs .tabtitle li a { color: inherit; text-decoration: none; display: block; }
.tabs .tabtitle li a:hover { text-decoration: none; }
.tab { padding: 0; }

/* Linked files tab styling */
.linked-files-box {
    padding: 18px;
}

/* =========================== */
/* List Table Header Filters   */
/* =========================== */

/* Table responsive container for horizontal scroll */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Filter field styling in table header */
table.liste thead tr.liste_titre th .filter-field {
    margin-top: 5px;
    padding-top: 5px;
}

table.liste thead tr.liste_titre th .filter-field input.flat {
    width: 100%;
    max-width: 180px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
}

table.liste thead tr.liste_titre th .filter-field input.flat:focus {
    outline: none;
    border-color: #337ab7;
    box-shadow: 0 0 3px rgba(51, 122, 183, 0.3);
}

/* Search and clear button styling in header */
table.liste thead tr.liste_titre th .center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

table.liste thead tr.liste_titre th .button-search,
table.liste thead tr.liste_titre th .button-clear {
    padding: 4px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    background: #f5f5f5;
    color: #333;
}

table.liste thead tr.liste_titre th .button-search:hover,
table.liste thead tr.liste_titre th .button-clear:hover {
    background: #e5e5e5;
    border-color: #bbb;
}

table.liste thead tr.liste_titre th .button-search {
    background: #337ab7;
    color: #fff;
    border-color: #2e6da4;
}

table.liste thead tr.liste_titre th .button-search:hover {
    background: #286090;
    border-color: #204d74;
}

/* =========================== */
/* Delete Confirmation Box   */
/* =========================== */

/* Hidden class for confirmation div */
.hidden {
    display: none !important;
}

/* Confirmation delete box styling */
.confirm-delete-box {
    border-left: 5px solid #f2cf87;
    background-color: #fcf8e3;
    padding: 15px 20px;
    margin: 10px 0 15px 0;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.confirm-message {
    margin: 0;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.confirm-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

.confirm-buttons .butAction {
    background: #061A59f2;
    color: #fff;
    padding: 3px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}

.confirm-buttons .butAction:hover {
    background: #061A59f2;
    padding: 3px 15px !important;
}

.confirm-buttons .butActionRefused {
    background: #061A59f2;
    color: #fff !important;
    padding: 3px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer !important;
    font-size: 13px;
}

.confirm-buttons .butActionRefused:hover {
    background: #061A59f2;
    padding: 3px 15px !important;
}

/* Confirm button styling */
#confirm_button_wrapper {
    margin-left: 5px;
}

#massaction_submit {
    padding: 5px 15px;
    font-size: 13px;
    min-width: 80px;
}

/* =========================== */
/* Linked Files Tab          */
/* =========================== */

/* Header section with company name and back to list */
.linked-files-header {
    margin-bottom: 15px;
}

.linked-files-company-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.linked-files-company-box .company-icon {
    /* display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px; */
    /* background: #f0f0f0; */
    /* border-radius: 50%; */

        border: 1px solid #CCC;
    box-shadow: 3px 3px 4px #DDD;
    padding: 4px;
    height: 80px;
    width: 80px;
    object-fit: contain;
    display: flex;
    vertical-align: middle;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.linked-files-company-box .company-icon .fas ,
.linked-files-company-box .company-icon img {
    font-size: 38px;
    color: #404040;
}

.linked-files-company-box .company-name {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.linked-files-company-box .back-to-list-link {
    color: #061a59;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
}

.linked-files-company-box .back-to-list-link:hover {
    text-decoration: underline;
}

/* Separator line */
.linked-files-separator {
    border-bottom: 2px solid #371871;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* Attached files section */
.attached-files-section {
    margin-top: 10px;
}

/* Table title with Add button */
.attached-files-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.attached-files-title span {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.attached-files-title .add-file-btn {
    background: #061a59f2;
    color: #fff;
    border: none;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.attached-files-title .add-file-btn:hover {
    background: #061a59;
}

/* Attached files table */
.attached-files-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    background: #fff;
}

.attached-files-table thead tr {
    background: #f8f8f8;
}

.attached-files-table th {
    padding: 10px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
}

.attached-files-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    color: #333;
}

.attached-files-table tbody tr:hover {
    background: #f9f9f9;
}

.attached-files-table .col-documents {
    width: 50%;
}

.attached-files-table .col-size {
    width: 20%;
}

.attached-files-table .col-date {
    width: 30%;
}

/* File upload section */
.file-upload-section {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #f9f9f9;
}

/* =========================== */
/* Prospects Dashboard        */
/* =========================== */

/* Dashboard tables row - side by side layout */
.dashboard-tables-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-tables-row .dashboard-box {
    flex: 1;
}

/* Dashboard page header with title and icon */
.dashboard-page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
}

.dashboard-title-icon {
    font-size: 15px;
    color: #333333;
    margin-right: 12px;
    vertical-align: middle;
}

.dashboard-title {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 1.2;
}

/* Dashboard table with border */
.dashboard-table {
    border-collapse: collapse;
    width: 100%;
}

.dashboard-table
/* .dashboard-table th,
.dashboard-table td 
*/
{ 
    border: 1px solid #cccccc;
}

.dashboard-table th {
    background: #f8f8f8;
    padding: 5px;
    text-align: left;
    font-weight: 600;
    border-top: 3px solid #061a59f2;
}

.dashboard-table td {
    padding: 10px;
    background: #fff;
}

.dashboard-table tr.liste_titre th {
    background: #e9e9e9;
}