/* Main container */
#stb-container {
    display: flex;
    flex-direction: column;
    margin: auto;
    color:#000000!important;
}

/* Toolbar */
#stb-toolbar {
    display: flex;
    padding: 15px 10px;
    background: #4f46e5;
    margin-bottom: 15px;
	color:#eef2ff;
	border-radius:7px;
    flex-wrap: wrap;
}

#stb-toolbar input {
    padding: 8px 12px;
    border-radius: 3px;
}

.tool-box {
    flex: 1;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    flex-direction: column; /* if you want items stacked vertically */
}

/* Ensure label is above input */
.tool-box .tool-label {
    display: block;
    margin-bottom: 5px;
}

/* Ensure result is on its own row */
.tool-box .tool-result {
    display: block;
    margin-top: 5px;
	font-size:1.6rem;
	font-weight:700;
}

/* Remove border from the last box in the row */
.tool-box:last-child {
    border-right: none;
}

.sb-left-column button {
    border-radius: 4px;
	margin:5px 5px 5px 0;
}

.sb-left-column button {
    background: #eef2ff;
    color: #4338ca;
    cursor: pointer;
}

.sb-left-column button:hover {
    background: #4338ca;
    color: #eef2ff;
}

/* Text input area */
#stb-text-input {
    width: 100%;
    min-height: 400px;
    padding: 30px;
    border: none;
    resize: vertical;
	border-radius:7px 0 0 7px;
    overflow: hidden;
}

/* Results container */

#stb-results div {
    font-size: 1rem;
}

#stb-page-count, 
#stb-reading-time, 
#stb-speaking-time, 
#stb-long-sentences-wrapper {
	border-bottom: 2px dotted #6366f1;
	margin-top:10px;
}

#stb-word-goal-result {
	margin-top:10px;
}

#stb-page-count, 
#stb-reading-time, 
#stb-speaking-time {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    width: 100%;
}

#stb-page-count .result,
#stb-reading-time .result,
#stb-speaking-time .result {
    text-align: right;
}

#stb-long-sentences-message {
	margin-top:-5px;
}

#stb-word-goal-result .over {
    color: green;
}

#stb-word-goal-result .under {
    color: red;
}

#stb-results h4 {
	font-size:1.4rem;
	margin:0 0 2px!important;
	padding:10px 0 0!important;
}


/* Color based on percentage */
#stb-long-sentences-message {
    color: #333;
}

#stb-long-sentences-message[data-message="Odlično!"] {
    color: green;
}

#stb-long-sentences-message[data-message="Ni slabo."] {
    color: orange;
}

#stb-long-sentences-message[data-message="Skrčite stavke za lažje branje."] {
    color: red;
}

/* Keyword Density Tabs */
#stb-keyword-tabs {
    display: flex;
	border-bottom:none!important;
	margin-bottom:10px;
}

.stb-tab-btn {
    padding: 6px 15px;
    border-radius: 7px 7px 0 0;
    background: #6366f1;
    color: #fff;
    cursor: pointer;
	margin-right:2px;
}

.stb-tab-btn:hover {
    background: #4f46e5;
}

.stb-tab-btn.active {
    background: #4f46e5;
}

.stb-keyword-content {
    border: none!important;
    display: none;
}

.stb-keyword-content.active {
    display: block;
}

.keyword-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 4px;
	border-bottom: 2px dotted #6366f1;
	text-transform: capitalize;
}

.keyword-word {
    text-align: left;
    flex: 1;
}

.keyword-freq {
    text-align: right;
    flex-shrink: 0;
}

/* Two column */
.sb-container {
	display: flex;
    flex-wrap: wrap;
}

.sb-left-column {
    flex: 1;
}

.sb-right-column {
    width: 390px;
    background-color: #eef2ff;
    padding: 20px;
	border-radius:0 7px 7px;
}

#stb-long-sentences-wrapper .stb-long-sentences-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

#stb-long-sentences-wrapper .long-sentences-label {
    text-align: left;
}

#stb-long-sentences-wrapper .long-sentences-value {
    text-align: right;
}

/* MOBILE */

/* Responsive: move last 3 items to new row under 920px */
@media (max-width: 920px) {
#stb-toolbar {
    flex-wrap: wrap;
}

.tool-box {
    flex: 1 1 33.33%;
    border-right: 1px solid #ccc;
}

/* Remove border on every third item in the wrapped layout */
.tool-box:nth-child(3),
.tool-box:last-child {
    border-right: none;
}
}

@media (max-width: 720px) {
#stb-text-input {
	border-radius:7px;
}

.sb-container {
    flex-direction: column;
}

.sb-right-column {
    width: 100%;
	border-radius: 7px;
	margin-top:20px;
}
}
/* Responsive adjustments */
@media (max-width: 600px) {
    #stb-toolbar {
        flex-direction: column;
    }
}