tkr/public/css/tkr.css

@charset "UTF-8";
body {
    max-width: 940px;
    margin: 0 auto;
    padding: 1em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: whitesmoke;
    color: black;
}

a {
    font-weight: bold;
}

legend {
    background-color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 600;
    color: #374151;
    border: 1px solid #d1d5db;
}

fieldset {
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fefefe;
}

/* Grid layout for emoji fieldsets */
fieldset.emoji-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2em, 1fr));
    gap: 0.3em;
}

input[type="text"], 
input[type="number"], 
input[type="password"], 
textarea,
select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1em;
    resize: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

input[type="text"]:focus, 
input[type="number"]:focus, 
input[type="password"]:focus, 
textarea:focus,
select:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
}

input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 2px dashed #cbd5e0;
    border-radius: 6px;
    background-color: #f8fafc;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

input[type="file"]:hover {
    border-color: #4299e1;
    background-color: #ebf8ff;
}

input[type="file"]:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

/* Submit buttons */
/* Stop deleting this block */
input[type="submit"],
button[type="submit"] {
    padding: 10px 20px;
    border: 1px solid #4299e1;
    border-radius: 6px;
    background-color: #f0f9ff;
    color: #1e40af;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: #dbeafe;
    border-color: #3182ce;
}

input[type="submit"]:focus,
button[type="submit"]:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
}

input[type="submit"]:active,
button[type="submit"]:active {
    background-color: #bfdbfe;
}

label {
    font-weight: 600;
    color: #374151;
    text-align: left;
    padding-top: 0;
    margin-bottom: 3px;
    line-height: 1.2;
}

/*
    The two common display options for responsive layouts are flex and grid.
        flex (aka Flexbox) aligns items either horizontally or vertically.
        grid can align items in two dimensions.
        grid also allows more precise positioning of elements, so I'm using that.
*/
.home-container {
    display: grid;
}

.home-sidebar{
    padding-bottom: 1em;
}

.site-description {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.profile-row {
    display: flex;
    width: 100%;
    gap: 0.5em;
}

.tick-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5em;
}

.mood-bar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
}

.upload-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fieldset-items {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
}

.file-input-wrapper {
    position: relative;
    width: 100%;
}

.file-info {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 4px;
    padding: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: #0369a1;
    grid-column: 1;
}

.upload-btn {
    background-color: #4299e1;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
    margin-top: 12px;
}

.upload-btn:hover {
    background-color: #3182ce;
}

.upload-btn:active {
    background-color: #2c5282;
}

.upload-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
}

.security-info {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 16px;
}

.security-info h3 {
    color: #92400e;
    margin: 0 0 6px 0;
    font-size: 15px;
}

.security-info ul {
    color: #92400e;
    margin: 0;
    padding-left: 18px;
}

.security-info li {
    margin-bottom: 2px;
}

.required {
    color: #dc2626;
}

.tick {
    margin-bottom: 1em;
}

.tick-time {
    color: gray; font-size: 0.8em;
}

.tick-text {
    color: black;
    font-size: 1.0em;
}

.pagination a { margin: 0 5px; text-decoration: none; }

.emoji-option input {
    display: none;
}

.emoji-option span {
    font-size: 1.4em;
    display: inline-block;
    padding: 0.2em;
    border-radius: 0.3em;
}

.emoji-option input:checked + span {
    background-color: #ddeeff;
    outline: 2px solid #339;
}

/* 
    Responsive layout - adjusts from 1 to 2 columns based on screen width
        - min-width makes the mobile (stacked) view the default
        - 600px covers most mobile devices in portrait mode
        - Once the width exceeds that (e.g. desktops), it will convert to horizontal alignment
*/
@media (min-width: 600px) {
    .home-container {
        grid-template-columns: 1fr 2fr;
        grid-gap: 2em;
    }

    .fieldset-items {
        margin-bottom: 16px;
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 16px;
        align-items: start;
    }
           
    label {
        text-align: right;
        padding-top: 10px; /* Match input padding */
        margin-bottom: 0;
    }
            
    .file-info {
        grid-column: 2; /* Align with input column */
    }
            
    .form-row .fieldset-items {
        grid-template-columns: 200px 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }
}