/* =========================================================
   FACEBOOK STYLE DARK MODE
   HOME.PHP
========================================================= */

/* =========================================================
   GLOBAL DARK MODE
========================================================= */

:root {
    --dark-bg: #f0f2f5;
    --dark-card: #ffffff;
    --dark-input: #ffffff;
    --dark-input-bg: #f0f2f5;
    --dark-text: #050505;
    --dark-muted: #65676b;
    --dark-border: #ddd;
    --dark-hover: #e4e6eb;
    --dark-icon-bg: #e4e6eb;
    --dark-primary: #1877f2;
    --dark-danger-bg: #ffebe9;
    --dark-danger-text: #d93025;
}


/* =========================================================
   DARK THEME
========================================================= */

html.dark-mode {
    --dark-bg: #18191a;
    --dark-card: #242526;
    --dark-input: #3a3b3c;
    --dark-input-bg: #3a3b3c;
    --dark-text: #e4e6eb;
    --dark-muted: #b0b3b8;
    --dark-border: #3e4042;
    --dark-hover: #4e4f50;
    --dark-icon-bg: #3a3b3c;
    --dark-primary: #4599ff;
    --dark-danger-bg: #442326;
    --dark-danger-text: #ff6b6b;
}


/* =========================================================
   BODY
========================================================= */

html.dark-mode body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}


/* =========================================================
   TOP BAR
========================================================= */

html.dark-mode .topbar {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-bottom-color: var(--dark-border) !important;
}

html.dark-mode .title {
    color: var(--dark-text) !important;
}

html.dark-mode .back {
    color: var(--dark-text) !important;
}

html.dark-mode .back:hover {
    background: var(--dark-hover) !important;
}


/* =========================================================
   CONTAINER
========================================================= */

html.dark-mode .container {
    background: transparent !important;
}


/* =========================================================
   COVER
========================================================= */

html.dark-mode .cover {
    background:
        linear-gradient(
            135deg,
            #145dcc,
            #5937bd
        ) !important;
}

html.dark-mode .cover-button {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
    border: 1px solid #4e5155 !important;
}


/* =========================================================
   PROFILE AREA
========================================================= */

html.dark-mode .photo-area {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .profile-photo {
    background: #3a3b3c !important;
    border-color: var(--dark-card) !important;
}

html.dark-mode .photo-camera {
    background: var(--dark-icon-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-card) !important;
}

html.dark-mode .photo-camera:hover {
    background: var(--dark-hover) !important;
}


/* =========================================================
   FORM SECTION
========================================================= */

html.dark-mode .form-section {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .section-title {
    color: var(--dark-text) !important;
}

html.dark-mode label {
    color: var(--dark-text) !important;
}


/* =========================================================
   INPUTS
========================================================= */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background: var(--dark-input-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--dark-muted) !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    background: var(--dark-input) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-primary) !important;
    box-shadow: 0 0 0 2px rgba(69,153,255,.15) !important;
}


/* =========================================================
   SELECT OPTIONS
========================================================= */

html.dark-mode select option {
    background: #242526 !important;
    color: #e4e6eb !important;
}


/* =========================================================
   HELP TEXT
========================================================= */

html.dark-mode .help {
    color: var(--dark-muted) !important;
}


/* =========================================================
   FILE BOX
========================================================= */

html.dark-mode .file-box {
    background: var(--dark-input-bg) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .file-box input {
    background: transparent !important;
    color: var(--dark-text) !important;
}


/* =========================================================
   SAVE BUTTON
========================================================= */

html.dark-mode .save-button {
    background: var(--dark-primary) !important;
    color: #ffffff !important;
}

html.dark-mode .save-button:hover {
    opacity: .9;
}


/* =========================================================
   DANGER AREA
========================================================= */

html.dark-mode .danger {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .delete-button {
    background: var(--dark-danger-bg) !important;
    color: var(--dark-danger-text) !important;
}

html.dark-mode .delete-button:hover {
    background: #55282c !important;
}


/* =========================================================
   SWEETALERT
========================================================= */

html.dark-mode .swal2-popup {
    background: #242526 !important;
    color: #e4e6eb !important;
}

html.dark-mode .swal2-title {
    color: #e4e6eb !important;
}

html.dark-mode .swal2-html-container {
    color: #b0b3b8 !important;
}

html.dark-mode .swal2-cancel {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
}


/* =========================================================
   FILE UPLOAD BUTTON
========================================================= */

html.dark-mode input[type="file"]::file-selector-button {
    background: #4e4f50;
    color: #e4e6eb;
    border: 0;
    padding: 8px 12px;
    margin-right: 10px;
    border-radius: 6px;
    cursor: pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    html.dark-mode .form-section {
        background: var(--dark-card) !important;
    }

    html.dark-mode .danger {
        background: var(--dark-card) !important;
    }

}


* {
    box-sizing: border-box;
}

body {

    margin: 0;

    background: #f0f2f5;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #050505;

}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {

    height: 58px;

    background: #fff;

    display: flex;

    align-items: center;

    padding: 0 12px;

    border-bottom: 1px solid #ddd;

    position: sticky;

    top: 0;

    z-index: 100;

}

.back {

    width: 40px;

    height: 40px;

    border: 0;

    background: transparent;

    border-radius: 50%;

    font-size: 21px;

}

.title {

    flex: 1;

    margin-left: 8px;

    font-size: 19px;

    font-weight: 700;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    max-width: 700px;

    margin: auto;

    padding-bottom: 50px;

}


/* =========================================================
   COVER
========================================================= */

.cover {

    height: 230px;

    background:
        linear-gradient(
            135deg,
            #1877f2,
            #7b4dff
        );

    position: relative;

    overflow: hidden;

}

.cover img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.cover-button {

    position: absolute;

    right: 15px;

    bottom: 15px;

    border: 0;

    background: rgba(255,255,255,.95);

    border-radius: 8px;

    padding: 10px 14px;

    font-weight: 700;

}


/* =========================================================
   PROFILE PHOTO
========================================================= */

.photo-area {

    background: #fff;

    text-align: center;

    padding-bottom: 20px;

}

.photo-wrapper {

    width: 145px;

    height: 145px;

    margin: -72px auto 0;

    position: relative;

}

.profile-photo {

    width: 145px;

    height: 145px;

    border-radius: 50%;

    object-fit: cover;

    border: 5px solid #fff;

    background: #eee;

}

.photo-camera {

    position: absolute;

    right: 4px;

    bottom: 5px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: 3px solid #fff;

    background: #e4e6eb;

    font-size: 18px;

}


/* =========================================================
   FORM
========================================================= */

.form-section {

    background: #fff;

    margin-top: 8px;

    padding: 18px;

}

.section-title {

    font-size: 19px;

    font-weight: 800;

    margin-bottom: 15px;

}

.form-group {

    margin-bottom: 17px;

}

label {

    display: block;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 7px;

}

input,
textarea,
select {

    width: 100%;

    border: 1px solid #ccd0d5;

    border-radius: 8px;

    padding: 12px;

    font-size: 15px;

    outline: none;

    background: #fff;

}

input:focus,
textarea:focus,
select:focus {

    border-color: #1877f2;

}

textarea {

    min-height: 100px;

    resize: vertical;

}

.help {

    color: #65676b;

    font-size: 12px;

    margin-top: 5px;

}


/* =========================================================
   FILE
========================================================= */

.file-box {

    background: #f0f2f5;

    border-radius: 8px;

    padding: 14px;

    text-align: center;

}

.file-box input {

    border: 0;

    padding: 0;

    background: transparent;

}


/* =========================================================
   BUTTON
========================================================= */

.save-button {

    width: 100%;

    border: 0;

    background: #1877f2;

    color: #fff;

    border-radius: 8px;

    padding: 13px;

    font-size: 16px;

    font-weight: 700;

}

.save-button:disabled {

    opacity: .6;

}


/* =========================================================
   DANGER
========================================================= */

.danger {

    margin-top: 8px;

    background: #fff;

    padding: 18px;

}

.delete-button {

    width: 100%;

    border: 0;

    background: #ffebe9;

    color: #d93025;

    border-radius: 8px;

    padding: 13px;

    font-weight: 700;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .cover {

        height: 190px;

    }

    .container {

        width: 100%;

    }

    .form-section {

        border-radius: 0;

    }

}