/* 42Laser - style.css */

:root {
    --gap: 12px; --rad: 8px;
    --bg: #1d3f3e; --fg: #b2a5a5; --bg2: #173232; --card: #654a4b; --dev-bg: #3a1f1f;
    --font: Josefin sans; --mono: monofur; 
}
body {
    display: flex; flex-direction: column; gap: var(--gap); 
    margin: 2px; 
    background: var(--bg); color: var(--fg); 
    font-family: var(--font); font-weight: 300;
}
.dev-env { background: var(--dev-bg); }
h1 { font-weight: 300; margin: 0; }
a { text-decoration: none; }
textarea { 
    flex: 1; width: 97%;
    padding:8px; border-radius:var(--rad); border:none; resize:both; 
    background-color:var(--bg); color:var(--fg);  
    font-family:var(--mono); font-size:0.9rem; 
}
textarea:focus { outline:1px inset var(--fg); }
textarea::-webkit-scrollbar, textarea::-webkit-scrollbar-button { display: none; }


.row { display:flex; gap: var(--gap); }
.column { display: flex; flex-direction: column; flex: 1; gap:var(--gap); }
.widget-column { display: flex; flex-direction: column; flex: 1 1 1; gap:var(--gap); }
.card { 
    display:flex; flex-direction:column; flex: 0; 
    border-radius:var(--rad); 
    background: var(--card); 
}
.widget { display: flex; flex: 1; width: 400px; max-height: 750px; }

.login-card { 
    display: flex; flex-direction: column; gap: var(--gap); align-items: center; 
    width: 300px; margin: auto; margin-top: 100px; padding: 16px; border-radius:var(--rad); 
    background:var(--card); 
}

.search-card { 
    display: flex; flex: 1; gap: var(--gap); align-items: center;
    height: 48px; padding: 0 8px; border-radius:var(--rad); 
    background:var(--card); 
}
.search-card select { 
    height: 32px;  border-radius: var(--rad); border: none;
    background-color: var(--bg); color: var(--fg); 
    font: inherit;
}
.search-card input { 
    flex: 1; 
    height: 32px; margin: 0; padding: 0 8px; border-radius: var(--rad); border: none;
    background: var(--bg); color: var(--fg); 
    font-family: inherit; 
}
.search-card input:focus { outline: 1px inset var(--fg); }
.search-card select option { background: var(--bg); color: var(--fg); }

.pad { padding: 4px; }
.pad form { display: flex; flex: 1; gap: var(--gap); }
.pad span { 
    margin-left: 2px; padding-right: 4px; 
    font-weight: 400; font-size: 1rem; 
}
.pad p { 
    display: flex; flex:0 1 22px; align-items: center; gap: var(--gap);
    margin: 2px; 
}
.pad img { 
    width: 18px; border-radius: 4px;
    filter: invert() sepia() hue-rotate(300deg) opacity(70%);  
} 
.pad img:hover { transform: scale(1.15); filter: none; }

.pad-body { flex: 1; }
.pad-menu { display: flex; gap: var(--gap); }
.pad-menu form { margin-bottom: 4px; justify-content: end}
.pad-menu select { 
    flex: 1;
    padding: 4px 0 0 4px; border-radius: var(--rad); 
    background: none; color: var(--fg); 
    font-family: inherit; font-size: 0.9rem;  
    min-width: 200px;
}
.pad-menu select option { background: var(--bg); color: var(--fg); }
.pad-menu input { 
    padding-left: 8px; border-radius: var(--rad); border: none; 
    font-family: var(--mono); 
    background: var(--bg); color: var(--fg); 
    height: 20px;
}

.pad-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pad-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pad-header-left span { white-space: nowrap; }
.pad-header-right { display: flex; align-items: center; gap: 6px; }
.pad-toggle {
    cursor: pointer;
    user-select: none;
    border: 0;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    padding: 4px 2px;
    opacity: 0.75;
  }
.pad-toggle:hover { opacity: 1; }
.pad.collapsed textarea, .pad.collapsed .pad-body { display: none; }

.today { 
    flex: 1 1 0; 
    padding: 8px; white-space: pre-wrap; border-radius: var(--rad); border: none;  
    background-color: var(--bg2); color: var(--fg);
    font-family: var(--mono); font-size: 0.9rem;
}

@media (max-width: 760px) {
    .row { flex-direction: column; }
    .column { flex: 0 0 auto; width: 100%; }
    .card { width: 100%; }
    .search-card { width: 100%; padding: 4px; }
    .search-card input, .search-card select { height: 24px; }
    .pad-menu { flex-direction: column; align-items: stretch; }
    .pad-menu form, .pad-menu select, .pad-menu input { width: 100%; }
}