/* ===================================================
   DOCUMENTATION PAGES - PROJECT CONTROLLER
   Password-Derived Encryption Strategy Documentation
   =================================================== */

/* Force white background for documentation pages */
body.documentation-page {
    background-color: #ffffff !important;
}

body.documentation-page main {
    background-color: #ffffff !important;
}

body.documentation-page article.fans-body-content {
    background-color: #ffffff !important;
}

body.documentation-page .container {
    background-color: #ffffff !important;
}

/* Breadcrumb Navigation */
.breadcrumb {
    background-color: #e9ecef;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.25rem;
}

.breadcrumb-item {
    color: #6c757d;
    font-size: 0.875rem;
}

.breadcrumb-item.active {
    color: #495057;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-right: 0.5rem;
    color: #6c757d;
}

.breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Button Toolbar Navigation */
.btn-toolbar {
    margin-bottom: 1.5rem;
}

.btn-group {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Code Blocks - Dark Theme */
pre {
    background-color: #282c34 !important;
    color: #abb2bf !important;
    border-radius: 0.5rem;
    padding: 1.25rem !important;
    overflow-x: auto;
    border-left: 4px solid #007bff;
    margin: 1rem 0;
}

pre code {
    color: #abb2bf !important;
    background-color: transparent !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Inline Code */
code {
    background-color: #e9ecef;
    color: #e83e8c;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875em;
}

/* Typography for Documentation */
body.documentation-page h1,
body.documentation-page h2,
body.documentation-page h3,
body.documentation-page h4,
body.documentation-page h5,
body.documentation-page h6 {
    color: #212529 !important;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

body.documentation-page h2 {
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
}

body.documentation-page p,
body.documentation-page li {
    color: #212529 !important;
}

/* Jumbotron */
.jumbotron {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    color: #ffffff !important;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron p {
    color: #ffffff !important;
}

/* Cards */
.card {
    background-color: #ffffff;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}

.card-header {
    background-color: #007bff;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.card-header.bg-success {
    background-color: #28a745 !important;
}

.card-header.bg-danger {
    background-color: #dc3545 !important;
}

.card-header.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.card-header.bg-info {
    background-color: #17a2b8 !important;
}

.card-header.bg-primary {
    background-color: #007bff !important;
}

.card-header.bg-dark {
    background-color: #343a40 !important;
}

.card-header.bg-secondary {
    background-color: #6c757d !important;
}

.card-body {
    background-color: #ffffff;
    color: #212529 !important;
}

.card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid rgba(0,0,0,0.125);
}

/* Alerts */
.alert {
    border-radius: 0.5rem;
    border-left-width: 4px;
    margin-bottom: 1.5rem;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    border-left-color: #28a745;
    color: #155724 !important;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-left-color: #17a2b8;
    color: #0c5460 !important;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    border-left-color: #ffc107;
    color: #856404 !important;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-left-color: #dc3545;
    color: #721c24 !important;
}

/* Tables */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    background-color: #ffffff;
}

.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}

.thead-dark th {
    background-color: #343a40;
    color: #fff;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,0.02);
}

.table-hover tbody tr:hover {
    background-color: rgba(0,123,255,0.05);
}

/* Responsive Container */
body.documentation-page .container {
    max-width: 1400px;
    padding: 2rem 1rem;
}

/* List Group for Navigation */
.list-group-item {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.125);
    color: #495057;
}

.list-group-item:hover {
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
}

/* Responsive */
@media (max-width: 768px) {
    body.documentation-page .container {
        padding: 1rem 0.5rem;
    }
    
    .btn-toolbar .btn-group {
        width: 100%;
    }
}