/* BamBoe Forms – basic styling (Nextcloud theme variables) */

/* Ensure the app can use the full available width inside Nextcloud */

.bamboe-app{width:100%;}

/* Nextcloud wraps app content in #app-content-wrapper. Remove max-width limits there.
 Scope this to our app via the body class Nextcloud sets: */
#app-content-wrapper{max-width:none !important; width:100% !important;}

.bamboe-wrap{padding:16px 16px 24px; width:100%; max-width:none;}
.bamboe-header{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:16px;}
.bamboe-title{margin:0; font-size:22px; font-weight:700; Color:#fff !important;}
.bamboe-title .icon{margin-right:8px; vertical-align:middle;}
.bamboe-sub{color:var(--color-text-maxcontrast); font-size:13px; margin-top:4px; color: #fff !important;}
.bamboe-actions{display:flex; gap:8px;}

.bamboe-btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--color-primary-element); color:var(--color-primary-text); text-decoration:none; border:0; cursor:pointer; font-weight:600;}
.bamboe-btn:hover{filter:brightness(0.95);}

/* Responsive grid: fills available width and reflows on smaller screens */
.bamboe-cards{
	display:grid;
	grid-template-columns:repeat(4, minmax(220px, 1fr));
	gap:12px;
	width:100%;
	justify-items:stretch;
}


/* Breakpoints: keep a 4x2 layout on wide screens, then gracefully reduce */
@media (max-width: 1400px){
	.bamboe-cards{grid-template-columns:repeat(3, minmax(220px, 1fr));}
}
@media (max-width: 980px){
	.bamboe-cards{grid-template-columns:repeat(2, minmax(220px, 1fr));}
}
@media (max-width: 640px){
	.bamboe-cards{grid-template-columns:1fr;}
}

.bamboe-card{border:1px solid var(--color-border); background:var(--color-main-background); border-radius:16px; padding:14px; box-shadow:0 1px 2px rgba(0,0,0,0.06); position:relative; overflow:hidden;}
.bamboe-card:before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,92,153,0.06), rgba(0,92,153,0)); pointer-events:none;}
.bamboe-card-head{position:relative; display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:10px;}
.bamboe-card-title{display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px;}
.bamboe-card-meta{font-size:12px; color:var(--color-text-maxcontrast);}

.bamboe-empty{position:relative; color:var(--color-text-maxcontrast); font-size:13px; padding:6px 0;}

.bamboe-list{position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.bamboe-list-item{display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; border:1px solid var(--color-border); background:var(--color-background-hover);}
.bamboe-list-item:hover{border-color:var(--color-primary-element);}
.bamboe-list-icon{width:20px; height:20px;}
.bamboe-link{text-decoration:none; font-weight:600; cursor:pointer;}
.bamboe-link:hover{text-decoration:underline;}

/* Admin page */
.bamboe-admin{padding:16px; max-width:none; overflow-y:auto;}
.bamboe-admin h2{margin-top:0;}
.bamboe-admin .muted{color:var(--color-text-maxcontrast);}
.bamboe-form{border:1px solid var(--color-border); border-radius:16px; padding:14px; background:var(--color-main-background); margin:12px 0;}
.bamboe-form .row{display:flex; gap:12px; margin-bottom:12px;}
.bamboe-form .col{flex:1;}
.bamboe-form label{display:block; font-weight:700; margin-bottom:6px;}
.bamboe-form input, .bamboe-form select{width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--color-border); background:var(--color-main-background);}
.bamboe-form .actions{display:flex; justify-content:flex-end;}
.bamboe-form button.primary{background:var(--color-primary-element); color:var(--color-primary-text); border:0; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;}
.bamboe-form button.primary:hover{filter:brightness(0.95);}
.bamboe-form button.danger{background:var(--color-error); color:#fff; border:0; padding:6px 10px; border-radius:10px; cursor:pointer; font-weight:700;}

.bamboe-admin .sep{border:0; border-top:1px solid var(--color-border); margin:16px 0;}
.bamboe-admin table.grid{width:100%; border-collapse:collapse;}
.bamboe-admin table.grid th, .bamboe-admin table.grid td{border-bottom:1px solid var(--color-border); padding:10px 8px; vertical-align:top;}

.bamboe-help{border:1px solid var(--color-border); border-radius:16px; padding:12px 14px; background:var(--color-main-background); margin:12px 0 14px;}
.bamboe-help h3{margin:0 0 8px; font-size:16px;}
.bamboe-help ul{margin:0; padding-left:18px;}
.bamboe-help li{margin:6px 0;}
.bamboe-help code{background:var(--color-background-hover); border:1px solid var(--color-border); border-radius:8px; padding:1px 6px;}

/* Better grid behaviour in some themes */
.bamboe-cards{justify-items:stretch; align-items:stretch;}
.bamboe-card{min-width:0;}

/* ==========================================================
 Full-height iframe viewer (open.php)
 - Use the available viewport height inside Nextcloud
 - Keep the iframe scrollable
 ========================================================== */

/*
 Make sure the open-view uses the full available height.
 We intentionally do NOT depend on the body class (it can differ between Nextcloud versions
 or when pages are rendered outside the main app navigation).
*/
#content,
#app-content,
#app-content-wrapper {
 /* Fallback to 50px if the variable is missing */
 height: calc(100vh - var(--header-height, 50px));
 overflow-y: auto !important;
  min-height: 0;
}

.bamboe-wrap {
 height: 100%;
 min-height: 0;
 display: flex;
 flex-direction: column;
}

.bamboe-iframeBox {
 flex: 1 1 auto;
 min-height: 0;
 overflow: auto;
   -webkit-overflow-scrolling: touch;
}

.bamboe-iframe {
 width: 100%;
 height: 100%;
 border: 0;
  overflow: auto;
}