/* =========================================================
   6453 — Brand Stylesheet
   Shared UI palette for all admin & client panel pages
   Palette: Forest Green + Matte Gold + Cream
   ========================================================= */

/* ---------- Brand variables ---------- */
:root {
    --brand-primary:    #14352a;
    --brand-primary-2:  #1c4536;
    --brand-primary-3:  #0f2a21;
    --brand-accent:     #a8834a;
    --brand-accent-2:   #c9a86a;
    --brand-tint:       #f2efe7;

    --brand-bg:         #f5f3ee;
    --brand-surface:    #ffffff;
    --brand-border:     #ddd8ce;
    --brand-border-2:   #e7e2d8;

    --brand-text:       #1e2320;
    --brand-muted:      #5c6560;
    --brand-navy:       #2d4a63;

    --brand-success:    #2f6b4f;
    --brand-danger:     #8b2e2e;
    --brand-warning:    #a8742a;
    --brand-info:       #2d4a63;

    --brand-radius:     4px;
    --brand-radius-lg:  6px;
    --brand-trans:      .15s ease;
}

/* =========================================================
   1. Base
   ========================================================= */
html, body, h1, h2, h3, h4, h5, h6 {
    font-family: Tahoma, "Segoe UI", system-ui, sans-serif;
}

body {
    font-size: 13px;
    background-color: var(--brand-bg);
    color: var(--brand-text);
}

/* =========================================================
   2. Page header
   ========================================================= */
.page-header {
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: 18px;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5,
.page-header h6 {
    font-weight: 700;
    color: var(--brand-primary);
    letter-spacing: .2px;
    margin-bottom: 0;
}

.page-header .page-icon {
    color: var(--brand-accent);
    margin-left: 6px;
}

/* =========================================================
   3. Cards
   ========================================================= */
.admin-card {
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04),
    0 4px 12px rgba(0, 0, 0, .05);
    overflow: hidden;
    background: var(--brand-surface);
}

.admin-card .card-header {
    background: var(--brand-primary);
    color: #fff;
    border-bottom: 3px solid var(--brand-accent);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .3px;
    padding: 12px 18px;
    border-radius: 0 !important;
}

.admin-card .card-header i {
    color: var(--brand-accent-2);
    margin-left: 6px;
}

.admin-card .card-body {
    background: var(--brand-surface);
}

/* =========================================================
   4. Forms
   ========================================================= */
.form-label {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--brand-primary);
    margin-bottom: 4px;
}

.form-control,
.form-select {
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    font-size: 13px;
    padding: 7px 10px;
    background-color: #fdfcfa;
    color: var(--brand-text);
    transition: border-color var(--brand-trans),
    box-shadow var(--brand-trans),
    background-color var(--brand-trans);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(20, 53, 42, .12);
    outline: none;
}

.form-control::placeholder {
    color: #a8b0aa;
}

.form-select:disabled,
.form-control:disabled {
    background-color: #f1eee6;
    color: var(--brand-muted);
}

/* Textarea */
textarea.form-control {
    min-height: 90px;
    line-height: 1.7;
}

/* File input */
input[type="file"].form-control {
    padding: 5px 8px;
    background-color: #fdfcfa;
}

input[type="file"].form-control::file-selector-button {
    background: var(--brand-primary);
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 5px 14px;
    margin-left: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--brand-trans);
}

input[type="file"].form-control::file-selector-button:hover {
    background: var(--brand-primary-2);
}

/* =========================================================
   5. Buttons
   ========================================================= */

/* Primary filled */
.btn-brand {
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--brand-radius);
    padding: 8px 22px;
    font-size: 13px;
    letter-spacing: .3px;
    transition: background var(--brand-trans), border-color var(--brand-trans);
}

.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
    background: var(--brand-primary-2);
    border-color: var(--brand-primary-2);
    color: #fff;
    box-shadow: none;
}

.btn-brand:active {
    background: var(--brand-primary-3);
}

.btn-brand:disabled {
    background: #8fa39a;
    border-color: #8fa39a;
    cursor: not-allowed;
    opacity: .85;
}

/* Outline */
.btn-brand-outline {
    background: transparent;
    border: 1px solid var(--brand-accent);
    color: var(--brand-accent);
    font-weight: 600;
    border-radius: var(--brand-radius);
    padding: 8px 18px;
    font-size: 13px;
    letter-spacing: .3px;
    transition: background var(--brand-trans),
    color var(--brand-trans),
    border-color var(--brand-trans);
}

.btn-brand-outline:hover,
.btn-brand-outline:focus,
.btn-brand-outline:active {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
    box-shadow: none;
}

/* Danger */
.btn-brand-danger {
    background: var(--brand-danger);
    border: 1px solid var(--brand-danger);
    color: #fff;
    font-weight: 600;
    border-radius: var(--brand-radius);
    padding: 8px 18px;
    font-size: 13px;
    letter-spacing: .3px;
    transition: background var(--brand-trans), border-color var(--brand-trans);
}

.btn-brand-danger:hover,
.btn-brand-danger:focus,
.btn-brand-danger:active {
    background: #6f2424;
    border-color: #6f2424;
    color: #fff;
    box-shadow: none;
}

/* Small variants */
.btn-sm.btn-brand,
.btn-sm.btn-brand-outline,
.btn-sm.btn-brand-danger {
    padding: 4px 12px;
    font-size: 12px;
}

/* Icon-only button (topbar) */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--brand-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-bg);
    color: var(--brand-muted);
    border: 1px solid var(--brand-border);
    transition: background var(--brand-trans),
    color var(--brand-trans),
    border-color var(--brand-trans);
}

.btn-icon:hover,
.btn-icon:focus {
    background: #ebe7dc;
    color: var(--brand-primary);
    border-color: #c9c2b3;
}

/* =========================================================
   6. Tables
   ========================================================= */
.table {
    --bs-table-color: var(--brand-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #faf8f3;
    --bs-table-striped-color: var(--brand-text);
    --bs-table-hover-bg: #f2efe7;
    --bs-table-hover-color: var(--brand-text);
    --bs-table-border-color: var(--brand-border);
    border-color: var(--brand-border);
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: var(--brand-tint);
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .2px;
    border-bottom: 2px solid var(--brand-border);
    vertical-align: middle;
}

.table > tbody > tr > td {
    vertical-align: middle;
    border-color: var(--brand-border);
}

.table-responsive {
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    background: var(--brand-surface);
    padding: 4px;
}

/* =========================================================
   7. Form section titles
   ========================================================= */
.form-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-primary);
    background: var(--brand-tint);
    padding: 8px 14px;
    border-radius: var(--brand-radius);
    border-right: 3px solid var(--brand-accent);
    margin: 22px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .3px;
}

.form-section-title i {
    color: var(--brand-accent);
    font-size: 12px;
}

.form-section-title:first-child {
    margin-top: 0;
}

/* =========================================================
   8. Status box (used in uppic.php)
   ========================================================= */
.status-box {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--brand-radius);
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    font-size: 13px;
    min-height: 46px;
    white-space: pre-wrap;
    line-height: 1.9;
}

.status-box.is-success {
    background: #eef3ee;
    border-color: #c5d6c9;
    color: var(--brand-success);
}

.status-box.is-error {
    background: #f6ebeb;
    border-color: #e0c5c5;
    color: var(--brand-danger);
}

/* =========================================================
   9. Drop zone (uploader)
   ========================================================= */
.drop-zone {
    display: block;
    border: 2px dashed var(--brand-border);
    border-radius: var(--brand-radius-lg);
    padding: 26px 18px;
    text-align: center;
    background: var(--brand-bg);
    transition: border-color var(--brand-trans), background var(--brand-trans);
    cursor: pointer;
}

.drop-zone:hover {
    border-color: var(--brand-accent);
    background: #faf6ec;
}

.drop-zone .dz-icon {
    font-size: 32px;
    color: var(--brand-accent);
    margin-bottom: 8px;
}

.drop-zone .dz-title {
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 4px;
    font-size: 13px;
}

.drop-zone .dz-hint {
    font-size: 12px;
    color: var(--brand-muted);
    line-height: 1.9;
}

.drop-zone input[type="file"] {
    display: none;
}

/* =========================================================
   10. Progress bar
   ========================================================= */
.progress-custom {
    height: 26px;
    border-radius: var(--brand-radius);
    background: #ebe7dc;
    overflow: hidden;
}

.progress-custom .progress-bar {
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
    transition: width .2s ease;
    background: var(--brand-primary);
    color: #fff;
}

/* =========================================================
   11. Files list (uploader)
   ========================================================= */
.files-list {
    margin-top: 12px;
    font-size: 13px;
}

.files-list .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    margin-bottom: 6px;
    background: #fdfcfa;
}

.files-list .file-item i {
    color: var(--brand-accent);
}

/* =========================================================
   12. Auto-info alert (post_seller pages)
   ========================================================= */
.auto-info-alert {
    background: var(--brand-tint);
    border: 1px solid var(--brand-border);
    border-right: 3px solid var(--brand-accent);
    border-radius: var(--brand-radius);
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--brand-muted);
    line-height: 2;
    margin-bottom: 16px;
}

.auto-info-alert i {
    color: var(--brand-accent);
    margin-left: 4px;
}

.auto-info-alert .badge {
    display: inline-block;
    background: #ebe7dc;
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 3px;
    margin-right: 4px;
    letter-spacing: .2px;
}

/* =========================================================
   13. Layout helpers
   ========================================================= */
.page-content {
    margin-right: 300px;
    margin-top: 43px;
    transition: margin-right .3s;
}

@media (max-width: 992px) {
    .page-content {
        margin-right: 0;
    }
}

/* =========================================================
   14. Bootstrap color overrides
   Neutralize rainbow colors used across legacy templates
   ========================================================= */

/* Text utilities mapped to brand palette */
.text-success { color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-navy) !important; }
.text-info    { color: var(--brand-navy) !important; }
.text-warning { color: var(--brand-warning) !important; }
.text-danger  { color: var(--brand-danger) !important; }
.text-muted   { color: var(--brand-muted) !important; }

/* Outline buttons legacy variants → brand-tinted */
.btn-outline-primary {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--brand-muted);
    border-color: var(--brand-border);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--brand-bg);
    border-color: #c9c2b3;
    color: var(--brand-primary);
}

/* Badges */
.badge.bg-success { background: var(--brand-primary) !important; }
.badge.bg-danger  { background: var(--brand-danger) !important; }

/* Links */
a {
    color: var(--brand-primary);
    text-decoration: none;
}
a:hover {
    color: var(--brand-primary-2);
    text-decoration: none;
}

/* =========================================================
   15. Scrollbar (subtle)
   ========================================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--brand-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--brand-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #c9c2b3;
}