/* =========================================================
   THEME VARIABLES
========================================================= */

:root {

    --bg-color: #f0f2f5;

    --surface-color: #ffffff;

    --surface-secondary: #f0f2f5;

    --text-color: #050505;

    --text-secondary: #65676b;

    --border-color: #ddd;

    --input-border: #ccd0d5;

    --input-bg: #ffffff;

    --hover-bg: #f2f2f2;

    --button-text: #ffffff;

    --photo-border: #ffffff;

    --profile-bg: #eeeeee;

    --camera-bg: #e4e6eb;

    --danger-bg: #ffebe9;

    --danger-text: #d93025;

    --primary: #1877f2;

}


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

html.dark-mode {

    --bg-color: #18191a;

    --surface-color: #242526;

    --surface-secondary: #3a3b3c;

    --text-color: #e4e6eb;

    --text-secondary: #b0b3b8;

    --border-color: #3e4042;

    --input-border: #4e5155;

    --input-bg: #3a3b3c;

    --hover-bg: #3a3b3c;

    --button-text: #ffffff;

    --photo-border: #242526;

    --profile-bg: #3a3b3c;

    --camera-bg: #3a3b3c;

    --danger-bg: #442326;

    --danger-text: #ff6b6b;

    --primary: #1877f2;

}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {

    margin: 0;

    background: var(--bg-color);

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

    color: var(--text-color);

    transition:
        background-color .2s ease,
        color .2s ease;

}


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

.topbar {

    height: 58px;

    background: var(--surface-color);

    display: flex;

    align-items: center;

    padding: 0 12px;

    border-bottom: 1px solid var(--border-color);

    position: sticky;

    top: 0;

    z-index: 100;

    transition:
        background-color .2s ease,
        border-color .2s ease;

}

.back {

    width: 40px;

    height: 40px;

    border: 0;

    background: transparent;

    color: var(--text-color);

    border-radius: 50%;

    font-size: 21px;

    cursor: pointer;

}

.back:hover {

    background: var(--hover-bg);

}

.title {

    flex: 1;

    margin-left: 8px;

    font-size: 19px;

    font-weight: 700;

    color: var(--text-color);

}


/* =========================================================
   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);

    color: #050505;

    border-radius: 8px;

    padding: 10px 14px;

    font-weight: 700;

    cursor: pointer;

}


/* =========================================================
   DARK COVER BUTTON
========================================================= */

html.dark-mode .cover-button {

    background: rgba(36,37,38,.95);

    color: #e4e6eb;

}


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

.photo-area {

    background: var(--surface-color);

    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 var(--photo-border);

    background: var(--profile-bg);

}

.photo-camera {

    position: absolute;

    right: 4px;

    bottom: 5px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: 3px solid var(--photo-border);

    background: var(--camera-bg);

    color: var(--text-color);

    font-size: 18px;

    cursor: pointer;

}


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

.form-section {

    background: var(--surface-color);

    margin-top: 8px;

    padding: 18px;

}

.section-title {

    font-size: 19px;

    font-weight: 800;

    margin-bottom: 15px;

    color: var(--text-color);

}

.form-group {

    margin-bottom: 17px;

}

label {

    display: block;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 7px;

    color: var(--text-color);

}


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

input,
textarea,
select {

    width: 100%;

    border: 1px solid var(--input-border);

    border-radius: 8px;

    padding: 12px;

    font-size: 15px;

    outline: none;

    background: var(--input-bg);

    color: var(--text-color);

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;

}

input::placeholder,
textarea::placeholder {

    color: var(--text-secondary);

}

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

    border-color: var(--primary);

}

select option {

    background: var(--surface-color);

    color: var(--text-color);

}

textarea {

    min-height: 100px;

    resize: vertical;

}

.help {

    color: var(--text-secondary);

    font-size: 12px;

    margin-top: 5px;

}


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

.file-box {

    background: var(--surface-secondary);

    color: var(--text-color);

    border-radius: 8px;

    padding: 14px;

    text-align: center;

}

.file-box input {

    border: 0;

    padding: 0;

    background: transparent;

    color: var(--text-color);

}


/* =========================================================
   FILE INPUT DARK MODE
========================================================= */

html.dark-mode input[type="file"] {

    color: var(--text-color);

}


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

.save-button {

    width: 100%;

    border: 0;

    background: var(--primary);

    color: var(--button-text);

    border-radius: 8px;

    padding: 13px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: opacity .2s ease;

}

.save-button:hover {

    opacity: .9;

}

.save-button:disabled {

    opacity: .6;

}


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

.danger {

    margin-top: 8px;

    background: var(--surface-color);

    padding: 18px;

}

.delete-button {

    width: 100%;

    border: 0;

    background: var(--danger-bg);

    color: var(--danger-text);

    border-radius: 8px;

    padding: 13px;

    font-weight: 700;

    cursor: pointer;

}


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

@media (max-width: 600px) {

    .cover {

        height: 190px;

    }

    .container {

        width: 100%;

    }

    .form-section {

        border-radius: 0;

    }

}