/* ========= Windows 95 inspired theme (no functionality changes) ========= */

:root{
    --teal: #008080;

    --win-gray: #c0c0c0;
    --win-face: #c0c0c0;
    --win-light: #ffffff;
    --win-dark: #808080;
    --win-shadow: #404040;
    --win-black: #000000;

    --title1: #000080;
    --title2: #1084d0;

    --text: #000000;
    --muted: #202020;

    --font: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
    margin:0;
    font: 13px/1.35 var(--font);
    color: var(--text);
    background: var(--teal);
    display:flex;
    justify-content:center;
    padding: 18px;
}

.app{ width:100%; max-width: 980px; }

/* Outer "window" shadow */
.app-frame{
    padding: 0;
    background: transparent;
    box-shadow: 10px 10px 0 rgba(0,0,0,.25);
}

/* Window frame */
.surface{
    background: var(--win-face);
    border: 2px solid var(--win-black);
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-shadow),
        inset -2px -2px 0 var(--win-dark);
    overflow:hidden;
    border-radius: 0;
    position:relative;
}

/* Title bar */
header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 3px 4px;
    background: linear-gradient(90deg, var(--title1), var(--title2));
    color: #fff;
    border-bottom: 2px solid var(--win-black);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.20);
}

/* Old-school app icon */
h1{
    margin:0;
    font-size: 13px;
    font-weight: 700;
    display:flex;
    align-items:center;
    gap: 6px;
    letter-spacing: .02em;
}

.logo{
    width: 16px; height: 16px;
    display:inline-grid;
    place-items:center;
    font-family: var(--mono);
    font-size: 12px;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    box-shadow:
        inset 1px 1px 0 #fff,
        inset -1px -1px 0 #808080;
    border-radius: 0;
}

.sub{
    display:none; /* Win95 title bars are tight */
}

/* Window control buttons (we keep the three dots in markup) */
.window-dots{
    display:flex;
    gap: 3px;
    align-items:center;
}

.dot{
    width: 18px;
    height: 16px;
    background: var(--win-face);
    border: 1px solid var(--win-black);
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-dark);
    position:relative;
}
.dot:before{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size: 12px;
    line-height: 1;
    color:#000;
    font-family: var(--mono);
    content:"";
}
.dot:nth-child(1):before{ content:"_"; transform: translateY(-2px); }
.dot:nth-child(2):before{ content:"□"; font-size: 11px; }
.dot:nth-child(3):before{ content:"×"; font-size: 12px; }

/* Toolbar area on the right */
.userbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 6px;
    flex-wrap:wrap;
}

/* Win95-style buttons / labels */
.pill, .counter, .logout{
    padding: 4px 8px;
    background: var(--win-face);
    color: var(--text);
    border: 1px solid var(--win-black);
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-dark);
    border-radius: 0;
    font-size: 12px;
    white-space: nowrap;
}

.logout{
    cursor:pointer;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.logout:active{
    box-shadow:
        inset -1px -1px 0 var(--win-light),
        inset 1px 1px 0 var(--win-dark);
}

/* Layout */
.main{
    display:grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    padding: 12px;
}
@media (max-width: 860px){
    .main{ grid-template-columns: 1fr; }
}

/* Group boxes */
.card{
    background: var(--win-face);
    border: 1px solid var(--win-black);
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-dark);
    border-radius: 0;
    overflow:hidden;
    position:relative;
}
.card:before{ display:none; }

.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 6px 8px;
    background: var(--win-face);
    border-bottom: 1px solid var(--win-black);
    box-shadow:
        inset 0 1px 0 var(--win-light);
}

.panel-title{
    font-weight: 700;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    display:flex;
    align-items:center;
    gap: 8px;
}
.panel-title .tag{
    padding: 1px 6px;
    font-size: 11px;
    border: 1px solid var(--win-dark);
    background: #e0e0e0;
    border-radius: 0;
    font-weight: 700;
    color: #000;
}

.microhint{
    font-size: 12px;
    color: var(--muted);
    max-width: 60ch;
}
.microhint b{ font-weight: 700; }

/* Form controls */
form{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
}

.field{ display:flex; flex-direction:column; gap: 6px; }

.field label{
    font-size: 12px;
    font-weight: 700;
    color: #000;
    text-transform:none;
    letter-spacing:0;
}

input[type="text"], textarea{
    width:100%;
    padding: 6px 7px;
    border-radius: 0;
    border: 1px solid var(--win-black);
    background: #ffffff;
    color: #000;
    outline:none;
    box-shadow:
        inset 1px 1px 0 var(--win-dark),
        inset -1px -1px 0 var(--win-light);
    font: 13px/1.35 var(--font);
}

textarea{
    resize: vertical;
    min-height: 60px;
    max-height: 190px;
}

input[type="text"]:focus, textarea:focus{
    outline: 1px dotted #000;
    outline-offset: -3px;
}

.checkline{
    display:flex;
    align-items:center;
    gap: 8px;
    user-select:none;
    padding: 8px;
    border: 1px solid var(--win-dark);
    background: #e6e6e6;
    border-radius: 0;
}
.checkline span{ font-size: 12px; }
.checkline input{ width: 16px; height: 16px; }

.actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Classic push button */
.btn{
    padding: 6px 10px;
    border-radius: 0;
    border: 1px solid var(--win-black);
    background: var(--win-face);
    color: #000;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor:pointer;
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-dark);
}
.btn:hover{ filter: brightness(1.01); }
.btn:active{
    box-shadow:
        inset -1px -1px 0 var(--win-light),
        inset 1px 1px 0 var(--win-dark);
}

.btn--accent{
    /* Keep class, but use standard Win95 face */
    background: var(--win-face);
}
.btn--accent:before{ display:none; }

/* List */
.list{ padding: 8px; }

.empty{
    text-align:center;
    color: #000;
    padding: 16px 10px;
    border: 1px solid var(--win-dark);
    background: #e6e6e6;
    border-radius: 0;
}

/* Todo cards = list-view items */
.todo{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    padding: 8px;
    margin: 8px 6px;
    border-radius: 0;
    cursor:pointer;
    border: 1px solid var(--win-black);
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 #d0d0d0;
    position:relative;
    transition: none;
}
.todo:before{ display:none; }
.todo:hover{
    outline: 1px dotted #000;
    outline-offset: -3px;
    transform:none;
    filter:none;
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 #d0d0d0;
}
.todo:active{ transform:none; }

.tick{
    flex: 0 0 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 0;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    display:grid;
    place-items:center;
    font-size: 12px;
    box-shadow:
        inset 1px 1px 0 #808080,
        inset -1px -1px 0 #ffffff;
    font-family: var(--mono);
}

.content{ flex:1 1 auto; }

.title{
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
    display:flex;
    align-items:center;
    gap: 8px;
    flex-wrap:wrap;
}

.desc{
    color: #202020;
    margin-top: 6px;
    white-space: pre-wrap;
    font-size: 12px;
}

.badge{
    padding: 1px 6px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
    background: #ffffe1; /* classic highlight */
    border: 1px solid #808080;
    box-shadow: none;
    font-family: var(--font);
}

.meta{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-top: 8px;
    font-size: 11px;
    color: #404040;
}

.hint{
    margin: 8px 10px 10px;
    color: #404040;
    font-size: 11px;
}

/* Login overlay as classic dialog */
.overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,.25);
}
.overlay.show{ display:flex; }

.login-card{
    width: min(520px, 92vw);
    background: var(--win-face);
    border: 2px solid var(--win-black);
    box-shadow:
        10px 10px 0 rgba(0,0,0,.22),
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-shadow),
        inset -2px -2px 0 var(--win-dark);
    border-radius: 0;
    padding: 10px;
    position:relative;
    overflow:hidden;
}

.login-title{
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 6px;
    color:#fff;
    background: linear-gradient(90deg, var(--title1), var(--title2));
    border: 1px solid #000;
}

.login-sub{
    margin: 0;
    color: #202020;
    font-size: 12px;
    max-width: 70ch;
    padding: 2px 2px 6px;
}

.row{
    display:flex;
    gap: 8px;
    margin-top: 10px;
    align-items: stretch;
}
.row input{ flex:1; }

@media (max-width: 420px){
    header{ flex-direction: row; }
    .userbar{ justify-content:flex-end; }
    .row{ flex-direction: column; }
    .window-dots{ order: 3; }
}