/* ==========================================================
   HOMESTEAD
   Application Styles
   v0.01
   ========================================================== */


/* ==========================================================
   Today Header
   ========================================================== */

.hsTodayHeader h1 {
    margin: 0 0 var(--hs-space-2);
    font-size: 2rem;
}

.hsTodayDate {
    margin: 0;
    color: var(--hs-text-muted);
}


/* ==========================================================
   Item
   ========================================================== */

.hsItem {
    display: grid;
    grid-template-columns: 7px 1fr;
    gap: var(--hs-space-3);

    padding: 0;
    overflow: hidden;
}

.hsItemMarker {
    background: var(--hs-primary);
}

.hsItemContent {
    display: flex;
    flex-direction: column;
    gap: var(--hs-space-2);

    padding: var(--hs-space-4);
}


/* ==========================================================
   Item Header
   ========================================================== */

.hsItemHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hs-space-3);
}

.hsItemTime {
    color: var(--hs-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}


/* ==========================================================
   Item Content
   ========================================================== */

.hsItemTitle {
    margin: 0;

    font-size: 1.1rem;
    font-weight: 700;
}

.hsItemDetails {
    margin: 0;

    color: var(--hs-text-muted);
    line-height: 1.4;
}


/* ==========================================================
   Item People
   ========================================================== */

.hsItemPeople {
    display: flex;
    align-items: center;
    gap: var(--hs-space-2);

    margin-top: var(--hs-space-1);

    color: var(--hs-text-muted);
    font-size: 0.8rem;
}


/* ==========================================================
   Item Types
   ========================================================== */

.hsItem[data-type="appointment"] .hsItemMarker {
    background: var(--hs-primary);
}

.hsItem[data-type="bill"] .hsItemMarker {
    background: var(--hs-accent);
}

.hsItem[data-type="task"] .hsItemMarker {
    background: var(--hs-success);
}

.hsItem[data-type="event"] .hsItemMarker {
    background: #6B648A;
}

.hsItem[data-type="note"] .hsItemMarker {
    background: var(--hs-text-muted);
}

/* ==========================================================
   Item Actions
   ========================================================== */

.hsItemActions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hs-space-1);
    align-items: center;
    justify-content: flex-end;

    margin-top: var(--hs-space-2);
    padding-top: var(--hs-space-3);

    border-top: 1px solid var(--hs-border);
}

.hsItemAction {
    min-height: 36px;
    padding: 0 var(--hs-space-3);

    border: 1px solid var(--hs-primary);
    border-radius: var(--hs-radius-sm);

    background: transparent;
    color: var(--hs-primary);

    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;

    cursor: pointer;
}

/* ==========================================================
   Completed Items
   ========================================================== */

.hsItem.isComplete {
    opacity: 0.65;
}

.hsItem.isComplete .hsItemAction {
    border-color: var(--hs-success);

    background: var(--hs-success);
    color: white;

    cursor: default;
}

/* ==========================================================
   Composer
   ========================================================== */

.hsComposer {
    padding: var(--hs-space-4);

    background: var(--hs-surface);

    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
}

.hsComposerHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hs-space-4);
}

.hsComposerHeader h2 {
    margin:
        var(--hs-space-2) 0 0;
}

.hsComposerClose {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;
    background: transparent;

    color: var(--hs-text-muted);

    font-size: 1.5rem;

    cursor: pointer;
}

/* ==========================================================
   Composer Fields
   ========================================================== */

.hsComposerSection {
    margin-top: var(--hs-space-5);
}

.hsComposerLabel {
    display: block;

    margin-bottom: var(--hs-space-2);

    font-size: 0.875rem;
    font-weight: 700;
}

.hsTypePicker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hs-space-2);
}

.hsTypeButton {
    min-height: 40px;

    padding:
        0 var(--hs-space-3);

    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-sm);

    background: var(--hs-surface);
    color: var(--hs-text);

    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;

    cursor: pointer;
}

.hsTypeButton.isSelected {
    border-color: var(--hs-primary);

    background: var(--hs-primary);
    color: var(--hs-text-on-primary);
}

/* ==========================================================
   Inputs
   ========================================================== */

.hsInput {
    width: 100%;
    min-height: 44px;

    padding:
        var(--hs-space-3) var(--hs-space-3);

    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-sm);

    background: var(--hs-surface);
    color: var(--hs-text);

    font: inherit;
}

.hsInput:focus {
    outline: 2px solid var(--hs-primary);
    outline-offset: 1px;
}

.hsInput::placeholder {
    color: var(--hs-text-muted);
}

.hsTextarea {
    min-height: 88px;
    resize: vertical;
}

/* ==========================================================
   Field Layout
   ========================================================== */

.hsFieldRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hs-space-3);
}

.hsField {
    min-width: 0;
}

/* ==========================================================
   People Picker
   ========================================================== */

.hsPeoplePicker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hs-space-2);
}

.hsPersonOption {
    display: flex;
    align-items: center;
    gap: var(--hs-space-2);

    min-height: 40px;

    padding:
        0 var(--hs-space-3);

    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-sm);

    background: var(--hs-surface);

    font-size: 0.85rem;
    font-weight: 600;

    cursor: pointer;
}

.hsPersonOption input {
    margin: 0;

    accent-color: var(--hs-primary);
}

/* ==========================================================
   Create Item
   ========================================================== */

.hsCreateItemButton {
    width: 100%;
}

.hsFilters {
    display: flex;
    gap: var(--hs-space-2);

    overflow-x: auto;

    padding-bottom: var(--hs-space-1);

    scrollbar-width: none;
}

.hsFilters::-webkit-scrollbar {
    display: none;
}

.hsFilterButton {
    flex: 0 0 auto;

    min-height: 36px;

    padding: 0 var(--hs-space-3);

    border: 1px solid var(--hs-border);
    border-radius: 999px;

    background: var(--hs-surface);
    color: var(--hs-text-muted);

    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;

    cursor: pointer;
}

.hsFilterButton.isActive {
    border-color: var(--hs-primary);

    background: var(--hs-primary);
    color: var(--hs-text-on-primary);
}

/* ==========================================================
   Authentication
   ========================================================== */

.hsAuth {
    width: min(100% - 32px, 520px);
    margin: 64px auto;
}

.hsAuthCard {
    width: 100%;
}

.hsHeaderUser {
    display: flex;
    align-items: center;
    gap: var(--hs-space-3);
}

.hsBrand {
    display: flex;
    align-items: center;
    gap: var(--hs-space-2);
}

.hsUnseenBadge {
    min-width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    border-radius: 999px;

    background: var(--hs-accent);
    color: white;

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.hsItemBadgeGroup {
    display: flex;
    align-items: center;
    gap: var(--hs-space-2);
}

.hsNewBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 8px;

    border-radius: 999px;

    background: var(--hs-accent);
    color: var(--hs-text);

    font-size: 0.7rem;
    font-weight: 700;
}

.hsItem.isUnseen {
    font-weight: inherit;
}

.hsItem.isUnseen .hsItemTitle {
    font-weight: 700;
}

.hsItemAction.isSelected {
    background: var(--hs-primary);
    color: white;
    border-color: var(--hs-primary);
    font-weight: 700;
}

.hsAuthLink,
.hsHeaderMenu {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.hsAuthLink {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hsHeaderMenu {
    appearance: none;

    padding: 6px 12px;

    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;

    background: white;
    color: var(--hs-primary);

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

#loginMessage {
    text-align: center;
    margin-top: var(--hs-space-3);
}

.hsAdminPanel {
    margin-bottom: var(--hs-space-4);
}

.hsPendingUser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hs-space-3);
}

.hsPendingUserInfo {
    display: flex;
    flex-direction: column;
    gap: var(--hs-space-1);
}