/* App-like UI Colors */

:root {

--tb-pink: #FF1493;

--tb-blue: #007BFF;

--tb-green: #28A745;

--tb-red: #DC3545;

--tb-black: #1A1A1A;

--tb-white: #FFFFFF;

--tb-bg: #F4F7F6;

--tb-card: #FFFFFF;

}

.tb-app-wrapper {

font-family: 'Segoe UI', sans-serif;

background: var(--tb-bg);

color: var(--tb-black);

padding: 20px;

border-radius: 15px;

max-width: 900px;

margin: auto;

box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}

.tb-card {

background: var(--tb-card);

border-radius: 12px;

padding: 20px;

margin-bottom: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.05);

border-top: 4px solid var(--tb-blue);

}

.tb-card.pink { border-top-color: var(--tb-pink); }

.tb-card.green { border-top-color: var(--tb-green); }

.tb-card.black { border-top-color: var(--tb-black); }

/* Buttons */

.tb-btn {

border: none;

padding: 10px 20px;

border-radius: 8px;

cursor: pointer;

font-weight: bold;

transition: 0.3s;

color: var(--tb-white);

display: inline-block;

}

.tb-btn-blue { background: var(--tb-blue); }

.tb-btn-blue:hover { background: #0056b3; }

.tb-btn-pink { background: var(--tb-pink); }

.tb-btn-pink:hover { background: #d8107c; }

.tb-btn-green { background: var(--tb-green); }

.tb-btn-green:hover { background: #218838; }

.tb-btn-red { background: var(--tb-red); }

.tb-btn-red:hover { background: #c82333; }

.tb-btn-black { background: var(--tb-black); }

.tb-btn-black:hover { background: #000000; }

/* Inputs & Toggles */

.tb-input {

width: 100%;

padding: 12px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 8px;

box-sizing: border-box;

}

.tb-switch {

position: relative;

display: inline-block;

width: 50px;

height: 24px;

flex-shrink: 0;

}

.tb-switch input {

opacity: 0;

width: 0;

height: 0;

}

.tb-slider {

position: absolute;

cursor: pointer;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ccc;

transition: .4s;

border-radius: 34px;

}

.tb-slider:before {

position: absolute;

content: "";

height: 16px;

width: 16px;

left: 4px;

bottom: 4px;

background-color: white;

transition: .4s;

border-radius: 50%;

}

input:checked + .tb-slider {

background-color: var(--tb-green);

}

input:checked + .tb-slider:before {

transform: translateX(26px);

}

/* =========================================

Custom Modal (Fixed for Scrolling on Mobile)

========================================= */

.tb-modal-overlay {

display: none;

position: fixed;

z-index: 99999;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.6);

backdrop-filter: blur(5px);

overflow-y: auto;

padding: 20px 0;

}

.tb-modal-content {

background-color: var(--tb-white);

margin: 0 auto;

border-radius: 15px;

width: 90%;

max-width: 450px;

box-shadow: 0 15px 40px rgba(0,0,0,0.2);

animation: tb-zoom 0.3s ease;

display: flex;

flex-direction: column;

max-height: 90vh; /* স্ক্রিনের ৯০% হাইট নিবে */

}

.tb-modal-title {

margin: 0;

padding: 20px;

color: var(--tb-black);

border-bottom: 2px solid var(--tb-pink);

font-size: 1.2rem;

flex-shrink: 0;

}

/* মডালের বডিতে স্ক্রলবার দেওয়া হয়েছে */

#tb-modal-body {

padding: 20px;

overflow-y: auto;

flex-grow: 1;

}

.tb-modal-footer {

padding: 15px 20px;

text-align: right;

border-top: 1px solid #eee;

display: flex;

justify-content: flex-end;

gap: 10px;

flex-shrink: 0;

background: #fafafa;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

}

@keyframes tb-zoom {

from { transform: scale(0.8); opacity: 0; }

to { transform: scale(1); opacity: 1; }

}

/* Custom Toast */

#tb-toast-container {

position: fixed;

bottom: 20px;

right: 20px;

z-index: 100000;

}

.tb-toast {

min-width: 250px;

margin-top: 10px;

background-color: var(--tb-black);

color: #fff;

text-align: center;

border-radius: 8px;

padding: 15px;

box-shadow: 0 4px 10px rgba(0,0,0,0.2);

animation: tb-fadein 0.5s, tb-fadeout 0.5s 2.5s;

}

.tb-toast.success { border-left: 5px solid var(--tb-green); }

.tb-toast.error { border-left: 5px solid var(--tb-red); }

@keyframes tb-fadein {

from { bottom: 0; opacity: 0; }

to { bottom: 20px; opacity: 1; }

}

@keyframes tb-fadeout {

from { bottom: 20px; opacity: 1; }

to { bottom: 0; opacity: 0; }

}

/* Table & Tabs */

.tb-table {

width: 100%;

border-collapse: collapse;

margin-top: 15px;

}

.tb-table th, .tb-table td {

border: 1px solid #ddd;

padding: 12px;

text-align: left;

}

.tb-table th {

background-color: var(--tb-black);

color: var(--tb-white);

}

.tb-nav-tabs {

display: flex;

gap: 10px;

margin-bottom: 20px;

overflow-x: auto;

}

.tb-tab-btn {

flex: 1;

background: #ddd;

color: #333;

padding: 10px;

text-align: center;

border-radius: 8px;

cursor: pointer;

font-weight: bold;

min-width: 100px;

}

.tb-tab-btn.active {

background: var(--tb-blue);

color: var(--tb-white);

}

.tb-tab-content {

display: none;

}

.tb-tab-content.active {

display: block;

animation: tb-zoom 0.3s ease;

}