@import './palette.css';
/* Import Roboto from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Override Bootstrap defaults */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f1f5f9; /* Light gray */
    color: var(--mmc-default-text);
    font-size: 14px;
}

/* Logo */
.logo {
    display: block;
    margin: 20px auto;
    max-width: 150px;
    height: auto;
}

/* Container padding */
.container {
    padding: 30px 15px;
}

/* Section spacing */
.section, .tab-content, .alert, .mb-3, .mt-4, .table {
    margin-bottom: 30px !important;
}

/* Auth controls card */

#auth-controls .btn, #auth-controls p {
    margin: 0;
}

#auth-controls.card {
    padding: 10px; /* Reduced padding */
    min-height: auto; /* Prevent stretching */
}

/* Inner auth controls content */
#auth-controls .mb-3 {
    margin-bottom: 0 !important; /* Remove extra bottom margin */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out name and button */
}

/* Buttons */
.btn {
    height: 40px;
    border-radius: 9999px;
    padding: 0 20px;
    align-content: center;
    margin-bottom: 1rem;
    font-size: 14px;
}

.btn-primary {
    background-color: var(--mmc-primary-500);
    border: 1px solid var(--mmc-primary-500);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    border: 1px solid #9182F6;
    background-color: #9182F6 !important;
}

.btn-secondary {
    background: white;
    color: var(--mmc-default-text);
    border: 1px solid var(--mmc-default-text);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    border: 1px solid var(--mmc-default-text);
    background-color: #F5F5F5 !important;
    color: var(--mmc-default-text) !important;
}

.btn-info {
    background: var(--mmc-secondary4-500);
    border: 1px solid var(--mmc-secondary4-500);
    color: white !important;
}

.btn-info:hover, .btn-info:focus, .btn-info:active {
    background: #F5C68E !important;
    border: 1px solid #F5C68E !important;
}

/* Headings */

h1 {
    margin-top: 30px; /* Add gap below title */
    margin-bottom: 40px; /* Add gap below title */
    color: #000000; /* Black */
}

h2 {
    margin-top: 10px; /* Add gap below title */
    margin-bottom: 20px; /* Add gap below title */
    color: #000000; /* Black */
}

h3 {
    font-size: 1.25rem !important;
    margin-bottom: 1;
    padding-bottom: 0.5rem !important;
    color: black;
}

h4 {
    margin-top: 10px;
    margin-bottom: 15px; /* Add gap below title */
    color: #000000; /* Black */
    font-size: 18px !important;
}

/* Form controls */
.form-label {
    font-size: 0.875rem;
    color: var(--mmc-primary-500);
        font-weight: 700;
}
.form-control {
    border-color: #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
}

.form-check .form-check-input:focus {
    border-color: var(--mmc-primary-200);
    box-shadow: 0 0 0 .25rem var(--mmc-primary-300);
}

.form-check .form-check-input:checked {
    background-color: var(--mmc-primary-500);
    border-color: var(--mmc-primary-500);
}

.form-control[readonly] {
    background: #fafafa;
}

/* Tabs */
.nav.nav-tabs {
    background: transparent;
    border: none;
}

.nav-tabs .nav-link {
    color: var(--mmc-default-text);
    font-size: 14px;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid transparent;
    height: 48px;
    align-content: center;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: transparent;
    background: #EDF0F9;
}

.nav-tabs .nav-link.active {
    background-color: transparent !important;
    color: var(--mmc-primary-600) !important;
    border: none;
    border-bottom: 2px solid var(--mmc-primary-500);
    border-color: var(--mmc-primary-500);
}

.nav-tabs .nav-link.active:hover {
    background-color: #EDF0F9 !important;
}

/* Error messages */
.text-danger {
    margin-top: 10px;
}

/* Card effect for sections */
.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    background-color: #ffffff;
}

/* Table */
.table {
    background-color: #ffffff;
    border-radius: 5px;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-bg-type: white;
}

.table tr {
    height: 50px !important;
    max-height: 50px;
    align-content: center;
}

.table tbody tr td:nth-child(3) {
    white-space: nowrap;
}

.table .btn {
    margin: 0;
    height: 30px;
    padding: 0 15px;
}

/* styles.css */

/* Ensure Facts table buttons have vertical spacing */
#fact-table .btn {
  margin-bottom: 0.25rem; /* 4px vertical margin, matches Bootstrap's .mb-1 */
}

/* Optional: Adjust table cell padding for better alignment */
#fact-table td {
  padding: 0.5rem; /* Matches Bootstrap's .table padding, ensures enough space */
  vertical-align: middle; /* Center buttons vertically */
}

/* Optional: Ensure buttons wrap cleanly */
#fact-table .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem; /* 4px gap for consistency with me-1 */
}

.alert {
    position: sticky;
    top: 10px;
    z-index: 1000;
}

.alert-info {
    border: 1px solid var(--mmc-primary-300);
    color: black;
    background: var(--mmc-primary-100);
}

.hide-for-non-super {
    display: none !important;
}

.card-header {
    background: transparent;
}

.table-action-icon{
    width: 24px;
    height: 24px;
    cursor: pointer;
} 

.icon-primary {
    color: #6146E5;
}

   #template-table td:nth-child(3) {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Table styling for Logs tab */
#search-results, #last-results {
    table-layout: fixed; /* Ensure consistent column widths */
    width: 100%;
    max-width: 100%; /* Prevent table from exceeding container */
    overflow-x: auto; /* Add horizontal scrollbar if needed */
}

/* Column-specific widths */
#search-results th:nth-child(1), #last-results th:nth-child(1) { /* Created On */
    width: 15%;
}
#search-results th:nth-child(2), #last-results th:nth-child(2) { /* ID */
    width: 15%;
}
#search-results th:nth-child(3), #last-results th:nth-child(3) { /* Message */
    width: 30%;
}
#search-results th:nth-child(4), #last-results th:nth-child(4) { /* Reply */
    width: 30%;
}
#search-results th:nth-child(5), #last-results th:nth-child(5) { /* Recipient */
    width: 10%;
}

/* Text truncation for long content */
#search-results td:nth-child(3), #search-results td:nth-child(4),
#last-results td:nth-child(3), #last-results td:nth-child(4) {
    max-width: 0; /* Allow truncation */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevent wrapping by default */
}

/* Optional: Allow wrapping on hover for full content */
#search-results td:nth-child(3):hover, #search-results td:nth-child(4):hover,
#last-results td:nth-child(3):hover, #last-results td:nth-child(4):hover {
    white-space: normal; /* Wrap on hover */
    word-wrap: break-word; /* Break long words */
    overflow: visible; /* Show full content */
    max-height: 200px; /* Limit height to avoid excessive growth */
    cursor: pointer; /* Indicate interactivity */
}

/* Ensure table is scrollable if content overflows */
#search-results, #last-results {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* Adjust search input group */
#logs .input-group {
    max-width: 500px; /* Limit width for better alignment */
}

/* Reduce input height */
#search-text {
    padding: 0.25rem 0.5rem; /* Smaller padding */
    font-size: 0.875rem; /* Smaller font */
    line-height: 1.5; /* Tighter line height */
    height: 38px; /* Match button height */
}

/* Ensure button matches input */
#search-btn {
    padding: 0.25rem 1rem; /* Consistent padding */
    font-size: 0.875rem; /* Match input font */
    line-height: 1.5; /* Match input line height */
}